@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/public-sans-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens — design system Relevé (see design/DESIGN.md) */
:root {
  --paper: #f6f7f4;
  --surface: #ffffff;
  --sunk: #eef0ec;
  --ink: #17201b;
  --muted: #4f5d55;
  --line: #d6dbd3;
  --green: #1d5c4a;
  --green-tint: #dcebe3;
  --focus: #1d5c4a; /* focus ring: brand green, never the irritant orange */
  --orange: #d9661f;
  --orange-ink: #a9470b;
  --orange-tint: #fbe7d9;
  --billing-on: #d3efe3; /* discount label on the active billing button (mint, 6.4:1 on --green) */
  /* Priority score bands, same in both themes: ≤4 low, ≤9 medium, ≤18 high, 27 critical (ink ≥ 4.5:1) */
  --score-min: #eadfbf;
  --score-min-ink: #3b2a0a;
  --score-lo: #e7b86a;
  --score-lo-ink: #3b2a0a;
  --score-mid: #dc6f2a;
  --score-mid-ink: #2b1606;
  --score-hi: #c2410c;
  --score-hi-ink: #fff;
  /* Levers, pillars and roles each carry a hue */
  --lv-assistant: #2c5a9e;
  --lv-agent: #6343a8;
  --lv-feature: #96325f;
  --lv-keep: #5f6962;
  /* Pillar hues at constant lightness and chroma (OKLCH): only the hue changes */
  --hue-adopt: oklch(0.42 0.09 165);
  --hue-govern: oklch(0.42 0.09 225);
  --hue-train: oklch(0.42 0.09 112);
  --glow-k: 7%; /* coloured wash at the top of cards, kept low */
  --glow-strong: 16%; /* the strong glow is kept for the Essentiel offer */
  --shadow-hover: 0 16px 40px -20px rgb(20 40 30 / 0.16); /* hover lift, neutral (no coloured glow) */
  --halo-k: 30%; /* strength of the halos behind the hero and the tour */
  --hi: rgba(255, 255, 255, 0.85); /* top highlight of raised surfaces */
  --grain-o: 0.03;
  --gutter: clamp(1rem, 4vw, 2.5rem); /* page side margin: 16 px at 400, ~31 px at 768, 40 px on desktop */
  --track: color-mix(in srgb, var(--ink) 12%, transparent);
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(16, 35, 29, 0.06), 0 8px 24px rgba(16, 35, 29, 0.06);
  --shadow-pop: 0 24px 60px rgba(16, 35, 29, 0.18);
  --body: "Public Sans", system-ui, sans-serif;
  --display: "Archivo", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Motion tokens: exits run ~40 % shorter than entrances, every transition names its curve */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-1: 120ms;
  --d-2: 200ms;
  --d-3: 320ms;
  --d-4: 600ms;
  --ease: var(--ease-out); /* compatibility alias */
  /* Type scale: H1/H2 ratio ~1.38, one step for block titles */
  --fs-h1: clamp(2.5rem, 1.1rem + 3.9vw, 3.6rem); /* 3.9rem put the hero title on 4 lines at 1440 */
  --fs-h2: clamp(1.85rem, 1.2rem + 2vw, 2.6rem);
  --fs-h3-lg: clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h3: 1.15rem;
  --fs-lead: clamp(1.06rem, 1rem + 0.3vw, 1.15rem);
  --head-gap: 2.75rem; /* between a section header and its content */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1513;
    --surface: #161e1b;
    --sunk: #1c2622;
    --ink: #e8eee9;
    --muted: #9caba2;
    --line: #2e3b35;
    --green: #63c3a0;
    --green-tint: #1d3a30;
    --focus: #63c3a0;
    --orange: #f08a45;
    --orange-ink: #f5a46c;
    --orange-tint: #3a2618;
    --billing-on: var(--surface);
    --lv-assistant: #86aef0;
    --lv-agent: #b49cf0;
    --lv-feature: #f08bb8;
    --lv-keep: #a3b0a8;
    --hue-adopt: oklch(0.76 0.1 165);
    --hue-govern: oklch(0.75 0.075 225);
    --hue-train: oklch(0.8 0.085 112);
    --glow-k: 12%;
    --glow-strong: 28%;
    --shadow-hover: 0 16px 40px -20px rgb(0 0 0 / 0.55);
    --halo-k: 42%;
    --hi: rgba(255, 255, 255, 0.07);
    --grain-o: 0.04;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1513;
  --surface: #161e1b;
  --sunk: #1c2622;
  --ink: #e8eee9;
  --muted: #9caba2;
  --line: #2e3b35;
  --green: #63c3a0;
  --green-tint: #1d3a30;
  --focus: #63c3a0;
  --orange: #f08a45;
  --orange-ink: #f5a46c;
  --orange-tint: #3a2618;
  --billing-on: var(--surface);
  --lv-assistant: #86aef0;
  --lv-agent: #b49cf0;
  --lv-feature: #f08bb8;
  --lv-keep: #a3b0a8;
  --hue-adopt: oklch(0.76 0.1 165);
  --hue-govern: oklch(0.75 0.075 225);
  --hue-train: oklch(0.8 0.085 112);
  --glow-k: 12%;
  --glow-strong: 28%;
  --shadow-hover: 0 16px 40px -20px rgb(0 0 0 / 0.55);
  --halo-k: 42%;
  --hi: rgba(255, 255, 255, 0.07);
  --grain-o: 0.04;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Guard against horizontal page scroll (set after the 768 px header fix, checked at 768 and 1024) */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--green); }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
/* One focus ring everywhere; on solid green fills it becomes a ring separated by the page colour */
:where(a, button, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(.button:not(.secondary), .tabs button[aria-selected="true"], .billing button[aria-checked="true"]):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1180px, 100% - 2 * var(--gutter)); margin: auto; }
.narrow { width: min(820px, 100% - 2 * var(--gutter)); }
.skip { position: absolute; left: 1rem; top: -5rem; background: var(--ink); color: var(--paper); padding: 0.7rem; z-index: 5; }
.skip:focus { top: 1rem; }
.ico { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--mono); }

/* Header: slides away when scrolling down past 120 px, comes back on the way up (main.js) */
header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 3; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: transform var(--d-2) var(--ease-out), border-color var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out); will-change: transform; }
header.scrolled { border-color: var(--line); box-shadow: 0 4px 20px rgba(16, 35, 29, 0.06); }
header.is-hidden { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); box-shadow: none; transition: transform var(--d-3) var(--ease-in), border-color var(--d-3) var(--ease-in), box-shadow var(--d-3) var(--ease-in); }
.bar { min-height: 4.25rem; display: flex; align-items: center; gap: 1.3rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font: 700 1.35rem var(--display); color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
/* BoardAct mark: filled symbol in the brand colour of the theme (green, mint in dark) */
.brand-mark { width: 2.1rem; height: auto; aspect-ratio: 1049 / 951; color: var(--green); fill: currentColor; stroke: none; flex: none; }
.site-nav { display: flex; align-items: center; gap: 1.3rem; margin-left: auto; }
.site-nav a, .lang { font-weight: 600; text-decoration: none; color: var(--ink); }
.site-nav a:not(.button):hover { color: var(--green); }
.nav-toggle { display: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 0; font: inherit; cursor: pointer; }
.lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; border: 0; color: var(--muted); }
.lang:hover { color: var(--ink); }
.nav-cta { white-space: nowrap; }
.site-nav .nav-panel-cta { display: none; }
/* Up to 1024 px: logo, demo button, language and a menu button; the links open in a panel under the bar */
@media (max-width: 1024px) {
  .bar { gap: 0.5rem; }
  .brand { margin-right: auto; }
  .bar .nav-cta { order: 1; min-height: 44px; }
  .lang { order: 2; }
  .nav-toggle { order: 3; display: block; position: relative; width: 44px; height: 44px; flex: none; }
  /* Two 18 × 2 px bars that turn into a cross */
  .nav-toggle::before, .nav-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: currentColor; transition: transform 220ms var(--ease-out); }
  .nav-toggle::before { transform: translateY(-4px); }
  .nav-toggle::after { transform: translateY(4px); }
  .nav-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }
  /* The header (backdrop-filter) is the containing block of this fixed panel: top 100% = right under the bar */
  .site-nav { position: fixed; top: 100%; left: 0; right: 0; height: calc(100dvh - 100%); margin: 0; padding: 0.5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-top: 1px solid var(--line);
    opacity: 0; translate: 0 -8px; visibility: hidden; transition: opacity 160ms var(--ease-in), translate 160ms var(--ease-in), visibility 0s 160ms; }
  .site-nav.is-open { opacity: 1; translate: none; visibility: visible; transition: opacity 220ms var(--ease-out), translate 220ms var(--ease-out), visibility 0s; }
  .site-nav a:not(.button) { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--line); font: 600 1.15rem var(--display); opacity: 0; translate: 0 -4px; transition: opacity 120ms var(--ease-in), translate 120ms var(--ease-in); }
  /* Links come in one after the other on opening only */
  .site-nav.is-open a:not(.button) { opacity: 1; translate: none; transition: opacity 220ms var(--ease-out) calc(var(--i, 0) * 30ms), translate 220ms var(--ease-out) calc(var(--i, 0) * 30ms); }
  body.menu-open { overflow: hidden; }
}
/* Desktop nav: quiet links, a compact demo button */
@media (min-width: 1025px) {
  .site-nav { gap: 1.6rem; }
  .site-nav a:not(.button) { font: 500 0.9375rem/1 var(--body); color: var(--muted); }
  .site-nav a:not(.button):hover, .site-nav a[aria-current] { color: var(--ink); }
  .bar .nav-cta { height: 38px; padding: 0 0.95rem; font: 600 0.875rem var(--body); border-radius: 10px; }
  .lang { font: 500 0.8rem var(--mono); }
}
@media (max-width: 760px) {
  .bar .nav-cta { display: none; }
  .site-nav .nav-panel-cta { display: flex; justify-content: center; margin-top: auto; min-height: 52px; font-size: 1rem; }
}

/* Type */
section { padding: 6rem 0; }
h1, h2, h3 { font-family: var(--display); margin: 0 0 1rem; text-wrap: balance; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.025em; line-height: 1.04; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; line-height: 1.08; max-width: 24ch; }
h2.spaced { margin-top: 5rem; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.25; }
.calc h3, .limits h3 { font-size: var(--fs-h3-lg); }
/* Section intro under a title: same size and colour everywhere */
.section-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 56ch; margin: 0.75rem 0 0; text-wrap: pretty; }
/* French micro-typography lives in the source text (no-break spaces); wrapping avoids short last lines */
summary, p { text-wrap: pretty; }
.h-rest { color: var(--muted); } /* second half of a two-tone title */
.lead { font-size: 1.2rem; color: var(--muted); max-width: 38rem; }
/* Mono capitals only for labels of 1 to 4 words (eyebrows, tags, units); sentences are running text (.note) */
.eyebrow { font: 500 0.78rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }
.note { font: 400 0.875rem/1.5 var(--body); text-transform: none; letter-spacing: 0; color: var(--muted); max-width: 68ch; margin: 1.25rem 0 0; }
.note code { font: 500 0.85em var(--mono); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2rem 0 1.5rem; }
/* Buttons: 1 px border, light top highlight; hover lightens the fill (no lift, no dark shadow that would vanish in
   the dark theme), press moves 1 px down. Colours switch at once, only transform is animated. */
.button { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--green); color: var(--surface); padding: calc(0.85rem + 1px) calc(1.25rem + 1px); border-radius: var(--radius); text-decoration: none; font-weight: 600; border: 1px solid var(--green); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18); transition: transform 0.18s var(--ease-out); }
.button:hover { background: color-mix(in srgb, var(--green) 90%, #fff); }
.button:active { transform: translateY(1px); transition-duration: 0.06s; }
.button:hover .ico { transform: translateX(3px); }
.button .ico { transition: transform 0.2s var(--ease-out); }
.button.secondary { background: transparent; color: var(--green); border-color: color-mix(in srgb, var(--green) 60%, var(--line)); box-shadow: none; }
.button.secondary:hover { background: color-mix(in srgb, var(--green) 10%, transparent); }
.button.small { padding: calc(0.45rem + 1px) calc(0.9rem + 1px); color: var(--surface); }
/* Not available yet (trial before sign-up opens): an <a> without href, so neither a link nor a tab stop.
   Same box as a button, muted text on the surface (AA in both themes), no hover or press effect. */
.button.is-soon { background: transparent; color: var(--muted); border: 1px dashed var(--line); box-shadow: none; cursor: default; justify-content: center; }
.button.is-soon:hover { background: transparent; }
.button.is-soon:active { transform: none; }

/* Hero */
.hero { padding: 5rem 0 4rem; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(circle, var(--green-tint), transparent 65%); opacity: 0.9; z-index: -1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; position: relative; }
.hero-copy, .hero-shot { position: relative; z-index: 1; }
.hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; color: var(--muted); font-size: 0.95rem; }
.hero-points li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-points .ico { color: var(--green); }
.hero-shot { margin: 0; }
.hero-shot > .tilt, .tour-shot { margin: 0; position: relative; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); overflow: hidden; }
/* The tilt lives on a child, so the reveal (translate/opacity on .hero-shot) never cancels it */
.hero-shot > .tilt { transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transition: transform 0.6s var(--ease-out); border-color: color-mix(in srgb, var(--green) 30%, var(--line)); box-shadow: inset 0 1px 0 var(--hi), 0 40px 90px -30px color-mix(in srgb, var(--green) 55%, transparent), var(--shadow-pop); }
.hero-shot > .tilt:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.browser { display: flex; gap: 6px; padding: 10px 12px; background: var(--sunk); border-bottom: 1px solid var(--line); }
.browser span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.browser span:first-child { background: #e9776b; } .browser span:nth-child(2) { background: #e6b54a; } .browser span:nth-child(3) { background: #6cc28a; }

/* Hero halo: one green light behind the live preview. It settles in once on load, then stays still.
   No paint containment: the blur must fade past the box edges (contained, it was cut into a straight line at
   768 px); the hero's overflow: hidden is the only clip. */
.halo { position: absolute; z-index: 0; top: -14%; bottom: -14%; right: -10%; width: 62%; pointer-events: none; }
.halo::before { content: ""; position: absolute; inset: 0; filter: blur(46px); opacity: 0.9;
  background: radial-gradient(42% 50% at 40% 35%, color-mix(in srgb, var(--green) var(--halo-k), transparent), transparent 70%);
  animation: halo-in 1.6s var(--ease-out) both; }
@keyframes halo-in { from { opacity: 0.5; transform: scale(0.96); } }
.halo::after { content: ""; position: absolute; inset: 0; opacity: var(--grain-o); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
@media (max-width: 960px) {
  .halo { top: auto; bottom: -8%; right: -10%; left: -10%; width: auto; height: 62%; }
}

/* Trust band */
.trust { padding: 1.4rem 0; border-block: 1px solid var(--line); background: var(--surface); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 1.25rem; color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.trust-row span { display: inline-flex; align-items: center; gap: 0.5rem; }
.trust-row .ico { color: var(--green); width: 1.25em; height: 1.25em; }

/* Cards */
.grid { display: grid; gap: 1.2rem; margin-top: var(--head-gap); }
.three { grid-template-columns: repeat(3, 1fr); }
.four { grid-template-columns: repeat(4, 1fr); }
.two { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface); padding: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-lg); }
/* One hover language for every card: same lift, same timing; border and shadow change per card type */
.card, .plan, .lv-card, .role { transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.card, .plan, .lv-card, .role):hover { transform: translateY(-3px); }
}
.card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--green) 35%, var(--line)); }
.card p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.card h3 { margin: 0 0 0.5rem; }
.card h3 + p { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.badge-ico { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 12px; background: var(--green-tint); color: var(--green); margin-bottom: 1.1rem; }
.badge-ico.orange { background: var(--orange-tint); color: var(--orange-ink); }
.badge-ico svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.checks, .crosses { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.45rem; }
.checks li, .crosses li { position: relative; padding-left: 1.6rem; }
.checks li::before, .crosses li::before { content: ""; position: absolute; left: 0; top: 0.3rem; width: 1rem; height: 1rem; background: var(--green); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.checks li::before { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.crosses li::before { background: var(--muted); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }
.tint { background: var(--sunk); }
.notice { display: grid; grid-template-columns: 16px 1fr; gap: 0.7rem; align-items: start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 0.9rem 1.1rem; margin-top: 2rem; color: var(--muted); }
.notice .ico { width: 16px; height: 16px; margin-top: 0.3rem; color: var(--muted); }
.limits { margin-top: 3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: var(--head-gap) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; position: relative; }
.timeline li { position: relative; }
.timeline .n { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--green); color: var(--green); font: 700 1.1rem var(--display); position: relative; margin-bottom: 0.9rem; }
.timeline b { font-family: var(--display); font-size: 1.15rem; }
.timeline p { color: var(--muted); margin: 0.3rem 0 0; font-size: 0.95rem; }

/* Tour */
.tour { margin-top: var(--head-gap); position: relative; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.tabs button { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 0.95rem var(--body); color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer; transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.tabs button:hover { color: var(--ink); border-color: var(--green); }
.tabs button[aria-selected="true"] { background: var(--green); color: var(--surface); border-color: var(--green); }
.tour-shot { z-index: 1; border-color: color-mix(in srgb, var(--green) 25%, var(--line)); box-shadow: inset 0 1px 0 var(--hi), 0 40px 100px -40px color-mix(in srgb, var(--green) 60%, transparent); }
/* Screens stack in one grid cell at a fixed ratio: the new screen fades in over the old one (main.js, Web Animations),
   so the frame never collapses or blinks. The bottom of each screen fades out instead of ending on a cut row. */
.tour-stack { display: grid; aspect-ratio: 1600 / 1000; }
.tour-stack > picture { grid-area: 1 / 1; min-width: 0; }
.tour-stack img { width: 100%; height: 100%; object-fit: cover; object-position: top; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
/* Static halo under the screenshot; the caption stays above it */
.tour-halo { position: absolute; z-index: 0; left: 8%; right: 8%; top: 22%; bottom: -6%; pointer-events: none; filter: blur(50px); background: radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--green) var(--halo-k), transparent), transparent 72%); }
#visite .note { position: relative; z-index: 1; color: color-mix(in srgb, var(--ink) 60%, var(--muted)); }

/* Pricing: the billing switch sits above the offers (it only changes Essentiel); the three offers share six
   subgrid rows (head / price / unit / list / button / note), so prices, lists and buttons line up */
.tarifs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; }
.tarifs-head h2 { margin-bottom: 0; }
.billing { display: inline-flex; padding: 0.25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); gap: 0.25rem; }
.billing button { font: 600 0.95rem var(--body); color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 0.5rem 1.1rem; cursor: pointer; transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
/* The discount is green: orange is kept for the pain points */
.billing button small { font: 500 0.72rem var(--mono); color: var(--green); margin-left: 0.3rem; }
.billing button[aria-checked="true"] { background: var(--green); color: var(--surface); }
.billing button[aria-checked="true"] small { color: var(--billing-on); }
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(6, auto); gap: 0 1.2rem; margin-top: var(--head-gap); }
.plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem; position: relative; }
/* Essentiel is first in the HTML: phones, tablets, keyboard and screen readers all meet it first, in the same
   order at every width. On desktop it is placed in the middle column (same row for the three offers). */
@media (min-width: 961px) {
  .pricing > .plan { grid-row: 1 / span 6; }
  .plan.community { grid-column: 1; }
  .plan.featured { grid-column: 2; }
  .plan.custom { grid-column: 3; }
}
.note.center { font-size: 0.8rem; text-align: center; margin: 0; max-width: none; }
.plan:hover { box-shadow: var(--shadow); }
/* Essentiel stands out by its tinted border, its badge and its filled button: nothing turns */
.plan.featured { border: 1px solid color-mix(in srgb, var(--green) 55%, var(--line)); background: radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--green) var(--glow-strong), transparent), transparent 70%), var(--surface); box-shadow: inset 0 1px 0 var(--hi), 0 30px 70px -34px color-mix(in srgb, var(--green) 45%, transparent); }
.plan .tag { position: absolute; top: -0.8rem; left: 1.4rem; margin: 0; background: var(--green); color: var(--surface); font: 600 0.75rem var(--body); padding: 0.2rem 0.65rem; border-radius: 999px; }
.plan.featured .tag { z-index: 1; box-shadow: 0 0 0 4px var(--paper); }
.plan h3 { margin-bottom: 0.2rem; }
.plan .for { margin: 0; color: var(--muted); font-size: 0.9rem; }
.plan .price { font: 700 2.2rem var(--display); margin: 0.25rem 0 0; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.plan .price small { font: 500 0.95rem var(--body); color: var(--muted); letter-spacing: 0; }
.plan .unit { color: var(--muted); font-size: 0.92rem; margin: 0; }
.plan .checks { margin: 0.25rem 0 0.75rem; align-content: start; }
.plan .button { justify-content: center; align-self: end; }
@supports not (grid-template-rows: subgrid) {
  .plan .unit { min-height: 2.8em; }
}

/* Install (self-hosted) */
.install-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; }
.install-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; }
.cmd { margin: 0; padding: 1.3rem 1.4rem; font-family: var(--mono); font-size: 0.9rem; line-height: 1.6; overflow-x: auto; background: #10231d; color: #e8eee9; }
.cmd [data-image] { color: #9bc4af; }
/* The terminal sits in a clipped box on a fixed dark fill: inner mint ring instead of an outer outline */
.cmd:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #63c3a0; }
.cmd-note { margin: 0; padding: 0 1.4rem 1rem; background: #10231d; color: #9bc4af; font: 500 0.8rem var(--mono); }
.install-box > .note { margin: 0; max-width: none; padding: 0.75rem 1.1rem; border-top: 1px solid var(--line); }
/* Method tabs above the terminal: only Docker is published, Script and Helm are shown as "coming soon" */
.inst-tabs { display: flex; gap: 0.25rem; padding: 0.5rem 0.75rem 0; background: var(--sunk); border-bottom: 1px solid var(--line); }
.inst-tabs button { font: 600 0.85rem var(--body); color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.45rem 0.8rem 0.55rem; cursor: pointer; }
.inst-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green); }
.inst-tabs button[aria-disabled="true"] { cursor: default; pointer-events: none; }
.inst-tabs small { margin-left: 0.3rem; padding: 0.05rem 0.4rem; border: 1px solid var(--line); border-radius: 999px; font: 500 0.62rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 0.1em; }
.inst-tabs button:focus-visible { border-radius: 6px; }
/* Action bar under the terminal: Enter copies, ⌘K / Ctrl+K opens the install question */
/* No bottom border: the note under the bar draws the separating line */
.kbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding: 0.6rem 0.8rem 0.6rem 1.1rem; background: var(--sunk); font-size: 0.88rem; }
.kbar-src { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-weight: 600; }
.kbar-src .brand-mark { width: 1.2rem; }
.kbar-acts { display: inline-flex; align-items: center; gap: 0.35rem; }
.kbar-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.5rem; border-radius: 8px; border: 0; background: transparent; color: var(--ink); font: 600 0.88rem var(--body); text-decoration: none; cursor: pointer; transition: background-color 0.2s var(--ease-out); }
.kbar-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
/* Copy stays off until the image is public (D11) */
.kbar-btn[aria-disabled="true"] { cursor: default; color: var(--muted); }
.kbar-btn[aria-disabled="true"]:hover { background: transparent; }
.kbar-sep { width: 1px; height: 1.1rem; background: var(--line); margin-inline: 0.2rem; }
kbd { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.3rem; border-radius: 6px; font: 500 0.75rem var(--mono); color: var(--muted); background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 1px 0 var(--hi), inset 0 -1px 0 var(--line); }
.kbd-group { display: inline-flex; gap: 0.2rem; }
.nav-github { display: inline-flex; color: var(--ink); }
.nav-github .ico { width: 1.35em; height: 1.35em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; }
.foot-links a { font: 400 0.9rem var(--body); color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.live-kpis .delta { color: var(--green); font-size: 0.72rem; margin-top: 0.1rem; }

/* FAQ: heading column (sticky) beside a list with rules; the answer fades up on opening (transform and opacity
   only: the height is not animated) and the chevron turns */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-head { position: sticky; top: 6rem; }
.faq-head h2 { margin-bottom: 0; }
.faq-list details { border-top: 1px solid var(--line); padding: 1.1rem 0; }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font: 600 1.05rem/1.4 var(--body); list-style: none; display: block; position: relative; padding-right: 2rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 0; top: 0.2rem; width: 16px; height: 16px; background: var(--green); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; transition: transform 0.2s var(--ease-out);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
details[open] summary::after { transform: rotate(180deg); }
details p { color: var(--muted); margin: 0.6rem 0 0; }
@media (prefers-reduced-motion: no-preference) {
  details[open] > p { animation: fade-up 240ms var(--ease-out) 60ms both; }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 960px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .faq-head { position: static; }
  .faq-list { margin-top: var(--head-gap); }
}

/* Contact & footer */
/* The contact band is dark in both themes: it takes the dark tokens, so buttons, muted text and focus stay AA */
.contact { --paper: #10231d; --surface: #0f1513; --ink: #e8eee9; --muted: #9caba2; --line: #2e3b35; --green: #63c3a0; --focus: #63c3a0; background: var(--paper); color: var(--ink); }
.contact .eyebrow { color: #9bc4af; }
.contact-grid { display: grid; grid-template-columns: 7fr 5fr; align-items: end; gap: 2rem; }
.contact-grid > div > :last-child { margin-bottom: 0; }
.contact .actions { margin: 0; justify-content: flex-end; }
.contact-note { margin: 0.9rem 0 0; font: 400 0.9rem var(--body); color: var(--muted); text-align: end; }
/* E-mail: the address as selectable text, then "Write" (mailto) and "Copy" (falls back to selecting the address) */
.contact-mail { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); text-align: end; }
.contact-mail[hidden] { display: none; }
/* Legal notice: quiet, small type, after the contact band */
.legal { padding: 3.5rem 0; }
.legal h2 { font-size: 1.4rem; margin-bottom: 0; }
.legal .grid { margin-top: 0.5rem; gap: 0 2.5rem; }
.legal h3 { font-size: 1rem; margin: 1.4rem 0 0.4rem; }
.legal p { margin: 0 0 0.6rem; font-size: 0.9rem; color: var(--muted); max-width: 62ch; }
.cm-label { margin: 0 0 0.5rem; font: 400 0.9rem var(--body); color: var(--muted); }
.cm-row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.cm-addr { margin-right: 0.35rem; font: 600 1.05rem var(--body); color: var(--ink); overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; cursor: text; }
.cm-addr::selection { background: color-mix(in srgb, var(--green) 35%, transparent); color: var(--ink); }
.cm-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 38px; padding: 0 0.85rem; border: 1px solid color-mix(in srgb, var(--green) 60%, var(--line)); border-radius: var(--radius); background: transparent; color: var(--green); font: 600 0.875rem var(--body); text-decoration: none; cursor: pointer; }
.cm-btn:hover { background: color-mix(in srgb, var(--green) 10%, transparent); }
.cm-btn:active { transform: translateY(1px); }
.cm-btn .ico { width: 16px; height: 16px; }
/* LinkedIn: Yvan's profile, with the mark he supplied (images/linkedin.png, decorative: the text names the link) */
.cm-social { margin: 0.9rem 0 0; text-align: end; }
.cm-li { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 38px; color: var(--ink); font: 600 0.9rem var(--body); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; }
.cm-li:hover { text-decoration-color: currentColor; }
.li-mark { flex: none; display: block; }
.foot-li { display: inline-flex; align-items: center; gap: 0.4rem; }
@media (pointer: coarse) { .cm-btn, .cm-li { min-height: 44px; } }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; gap: 0; }
  .contact .actions { margin-top: 1.5rem; }
  .contact .actions .button { width: 100%; min-height: 52px; justify-content: center; }
  .contact-note, .contact-mail, .cm-social { text-align: start; }
  .cm-row { justify-content: flex-start; }
  .cm-addr { flex-basis: 100%; margin: 0 0 0.25rem; }
  .cm-btn { flex: 1; justify-content: center; min-height: 44px; }
}
/* Footer: brand line and in-page links, a rule, then the legal line */
footer { padding: 3.5rem 0 2rem; font-size: 0.9rem; color: var(--muted); }
.foot { display: grid; gap: 1.5rem; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.foot-brand { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; max-width: 44ch; }
.foot-brand .brand-mark { width: 20px; margin-top: 0.25rem; }
.foot-brand b { color: var(--ink); }
.foot-legal { margin: 0; font: 500 0.75rem var(--mono); }
@media (max-width: 640px) {
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; width: 100%; }
  .foot-links a { display: flex; align-items: center; min-height: 44px; }
}
main:focus { outline: none; }


/* Live hero preview: the product loop in motion (spot → prioritise → hand to AI → time saved) */
.browser em { margin-left: auto; font: 500 0.72rem var(--mono); color: var(--muted); font-style: normal; }
.live-body { padding: 1.3rem 1.4rem 1.4rem; display: grid; gap: 1rem; }
.live-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.live-kpis div { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1rem; display: grid; }
.live-kpis small { color: var(--muted); font-size: 0.8rem; }
.live-kpis b { font: 700 1.9rem var(--display); color: var(--green); font-variant-numeric: tabular-nums; }
/* Time curve: main.js sets --p (share of the curve drawn, 0.3 at rest, +1 segment per task handed over).
   A clipping window slides right while the drawing inside slides back by the same amount, so the curve stays
   still and is uncovered with transforms only. */
.live-chart { --p: 0.3; position: relative; height: 110px; }
.live-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lc-grid path { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.6; vector-effect: non-scaling-stroke; }
/* The window is 24 px wider than the chart and its last 24 px fade out (a fixed mask that moves with it), so the
   uncovered curve and area end softly instead of on a vertical edge; at full draw that fade lies past the chart. */
.lc-win, .lc-in { position: absolute; inset: 0; transition: transform 500ms var(--ease-out); }
.lc-win { right: -24px; overflow: hidden; transform: translateX(calc((var(--p) - 1) * (100% - 24px))); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.lc-in { right: 24px; transform: translateX(calc((1 - var(--p)) * 100%)); }
.live-chart .area { fill: var(--green-tint); }
.live-chart .line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* End point (HTML, so it stays round in the stretched chart), shown once the last segment is drawn */
.lc-dot { position: absolute; left: 100%; top: 25.45%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4.5px color-mix(in srgb, var(--green) 16%, transparent); opacity: 0; transition: opacity var(--d-2) var(--ease-in); }
.live-chart.full .lc-dot { opacity: 1; transition: opacity var(--d-3) var(--ease-out) 400ms; }
/* End of a cycle: the preview dims, resets while dimmed, then comes back */
.live-body > * { transition: opacity 300ms var(--ease-out); }
.live-body.dim > * { opacity: 0.4; transition: opacity 300ms var(--ease-in); }
.live-body.snap *, .live-body.snap *::before, .live-body.snap *::after { transition: none !important; }
.live-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.live-tasks li { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.55rem 0.7rem; font-size: 0.9rem; background: var(--surface); }
/* Active row ring drawn once in a pseudo-element; only its opacity changes */
.live-tasks li::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--green); box-shadow: 0 0 0 3px var(--green-tint); opacity: 0; transition: opacity 0.4s var(--ease-out); pointer-events: none; }
.live-tasks li.active::after { opacity: 1; }
.live-tasks .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score { display: grid; place-items: center; min-width: 2rem; height: 1.7rem; border-radius: 6px; font: 700 0.85rem var(--display); font-variant-numeric: tabular-nums; }
.s4 { background: var(--score-min); color: var(--score-min-ink); }
.s6, .s9 { background: var(--score-lo); color: var(--score-lo-ink); }
.s12, .s18 { background: var(--score-mid); color: var(--score-mid-ink); }
.s27 { background: var(--score-hi); color: var(--score-hi-ink); }
/* Status pill: the old label leaves upwards (120 ms), then the new one comes up from below (200 ms, 100 ms later),
   so two labels never overlap. Each label carries its own colour. */
.st { position: relative; display: grid; min-width: 9.5ch; text-align: center; font: 500 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.st i { grid-area: 1 / 1; font-style: normal; padding: 0.15rem 0.5rem; border-radius: 999px; opacity: 0; transform: translateY(4px); transition: opacity 120ms var(--ease-in), transform 120ms var(--ease-in); text-align: center; }
.st[data-s="1"] i:nth-child(1), .st[data-s="2"] i:nth-child(-n + 2) { transform: translateY(-4px); }
.st i:nth-child(1) { background: var(--sunk); color: var(--muted); }
.st i:nth-child(2) { background: var(--orange-tint); color: var(--orange-ink); }
.st i:nth-child(3) { background: var(--green-tint); color: var(--green); }
.st[data-s="0"] i:nth-child(1), .st[data-s="1"] i:nth-child(2), .st[data-s="2"] i:nth-child(3) { opacity: 1; transform: none; transition: opacity 200ms var(--ease-out) 100ms, transform 200ms var(--ease-out) 100ms; }

/* Icons draw their stroke when their card appears */
.js-motion .reveal .badge-ico svg * { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 1.1s var(--ease-out) 0.25s; }
.js-motion .reveal.in .badge-ico svg * { stroke-dashoffset: 0; }

/* Priority calculator */
.calc { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1.6fr; gap: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; }
.calc-copy { display: flex; flex-direction: column; }
.calc-copy p { color: var(--muted); }
.calc-form { display: grid; gap: 1rem; }
.calc-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc-form .opts { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.calc-form legend { font: 500 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.4rem; width: 100%; }
.calc-form label { position: relative; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.92rem; transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.calc-form label:hover { border-color: var(--green); }
.calc-form input { position: absolute; opacity: 0; pointer-events: none; }
.calc-form label:has(input:checked) { background: var(--green); border-color: var(--green); color: var(--surface); }
.calc-form label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.calc-form label:has(input:checked:focus-visible) { outline: none; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); }
.calc-out { display: flex; align-items: center; gap: 1.1rem; margin-top: auto; padding-top: 1.5rem; }
.calc-badge { display: grid; justify-items: center; gap: 0.3rem; flex: none; }
.calc-badge small { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.calc-out b { display: grid; place-items: center; min-width: 4.5rem; height: 4.5rem; border-radius: 10px; font: 700 2.25rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--score-mid-ink); background: var(--score-mid); }
.calc-out b[data-band="min"] { background: var(--score-min); color: var(--score-min-ink); }
.calc-out b[data-band="lo"] { background: var(--score-lo); color: var(--score-lo-ink); }
.calc-out b[data-band="hi"] { background: var(--score-hi); color: var(--score-hi-ink); }
.calc-res { display: grid; gap: 0.6rem; flex: 1; min-width: 0; }
.calc-label { display: block; font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
/* Gauge: the score over 27, drawn with a transform */
.gauge { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.gauge i { display: block; height: 100%; background: var(--score-mid); transform-origin: left center; transform: scaleX(calc(var(--s) / 27)); transition: transform 0.45s var(--ease-out); }
.gauge i[data-band="min"] { background: var(--score-min); }
.gauge i[data-band="lo"] { background: var(--score-lo); }
.gauge i[data-band="hi"] { background: var(--score-hi); }
/* Rolling digits: old and new values share one cell; main.js slides them (transform, opacity) */
.roll { display: inline-grid; overflow: clip; vertical-align: bottom; }
.roll > * { grid-area: 1 / 1; }

/* Long / short labels in the live preview: the short ones take over on phones */
.live-body .sm { display: none; }
@media (max-width: 960px) {
  .hero-shot > .tilt { box-shadow: inset 0 1px 0 var(--hi), 0 24px 60px -28px color-mix(in srgb, var(--green) 45%, transparent); }
}
/* Phones (≤ 480 px): stacked full-width calls to action, short labels, the optional eyebrow part hidden */
@media (max-width: 480px) {
  .hero-actions { display: grid; gap: 0.6rem; }
  .hero-actions .button { width: 100%; justify-content: center; min-height: 52px; }
  .hero .lead { text-wrap: pretty; max-width: 34ch; }
  .eb-opt { display: none; }
  .live-body .lg { display: none; }
  .live-body .sm { display: inline; }
  .live-kpis small { font-size: 0.75rem; white-space: nowrap; }
  .live-tasks .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 760px) {
  .calc { grid-template-columns: 1fr; }
  .live-kpis b { font-size: 1.5rem; }
  /* Status pills stay on phones (they tell the hero story), a bit tighter */
  .live-tasks li { gap: 0.55rem; }
  .st { min-width: 0; font-size: 0.66rem; letter-spacing: 0.06em; }
  .st i { padding-inline: 0.4rem; }
}

/* Motion: reveal on scroll (enabled by main.js only when motion is allowed) */
/* It moves the individual translate property, never transform, so card lifts and the hero tilt keep working.
   The stagger (--rd, set by main.js) delays the reveal only, not the hover. */
.js-motion .reveal { opacity: 0; translate: 0 14px; transition: opacity var(--d-4) var(--ease-out) var(--rd, 0ms), translate var(--d-4) var(--ease-out) var(--rd, 0ms); }
.js-motion .reveal.in { opacity: 1; translate: none; }
/* Safety net of main.js: what it reveals appears at once, nothing animates off screen */
.reveal-instant .reveal, .reveal-instant .reveal *, .reveal-instant .reveal *::before, .reveal-instant .reveal *::after { transition: none !important; }
.js-motion :is(.card, .plan, .lv-card, .role).reveal { transition: opacity var(--d-4) var(--ease-out) var(--rd, 0ms), translate var(--d-4) var(--ease-out) var(--rd, 0ms), transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* One point per line: no line with one point, then two */
  .hero-points { flex-direction: column; }
  .hero-shot > .tilt, .hero-shot > .tilt:hover { transform: none; }
  .four { grid-template-columns: repeat(2, 1fr); }
  .pricing { grid-template-columns: 1fr; max-width: 32rem; }
  .install-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: minmax(0, 1fr); }
  .timeline li { padding-left: 4rem; }
  .timeline .n { position: absolute; left: 0; top: 0; }
}
/* Tablet tier: pillars and calculator go full width; from 641 px each pillar puts its preview beside the text */
@media (max-width: 1024px) {
  .three { grid-template-columns: 1fr; }
  /* One column: title, text, choices, then the result under them */
  .calc { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .calc-copy { display: contents; }
  .calc-form { order: 1; margin-top: 1.25rem; }
  .calc-out { order: 2; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .three > .card { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 1.5rem; }
  .three > .card > * { grid-column: 1; }
  .three > .card > .pviz { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
}
/* 641-960 px: Essentiel on its own row on top, the two other offers side by side */
@media (min-width: 641px) and (max-width: 960px) {
  .pricing { max-width: none; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .plan.featured { grid-column: 1 / -1; }
}
/* Phones: one full-width column, no subgrid; the billing switch goes under the title, aligned left */
@media (max-width: 640px) {
  .tarifs-head { flex-direction: column; align-items: flex-start; }
  .pricing { grid-template-rows: none; row-gap: 1.6rem; }
  .plan { display: flex; flex-direction: column; gap: 0.75rem; grid-row: auto; }
  .plan .checks { flex: 1; }
  .plan .button { align-self: stretch; }
}
@media (max-width: 760px) {
  section { padding: 4rem 0; }
  .three, .two, .four { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-shot > .tilt, .hero-shot > .tilt:hover { transform: none; }
  .lv-track { scroll-behavior: auto; }
}

/* Method stepper: one task walks through the four steps */
.stepper li { padding-top: 0.2rem; padding-right: 0.6rem; padding-bottom: 0.8rem; border-radius: var(--radius); cursor: pointer; }
.stepper { counter-reset: step; }
.stepper li { counter-increment: step; }
/* Autoplay only fades layers drawn once (opacity) and scales the number (transform): the filled number and its
   halo are pseudo-elements over the outlined one, the active tread and example border are overlays too. */
.stepper .n { transition: transform var(--d-3) var(--ease-out); z-index: 1; }
.stepper .n::before, .stepper .n::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity var(--d-2) var(--ease-out); }
.stepper .n::before { content: counter(step); display: grid; place-items: center; background: var(--green); color: var(--surface); }
.stepper .n::after { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 18%, transparent); transition-duration: var(--d-3); }
.stepper li:is(.done, .active) .n::before, .stepper li.active .n::after { opacity: 1; }
.stepper li.active .n { transform: scale(1.12); }
/* End of a cycle: the steps clear one after the other, from the top step down (main.js, 60 ms apart) */
.stepper.rewind .n, .stepper.rewind .n::before, .stepper.rewind .n::after, .stepper.rewind .ex, .stepper.rewind .ex::after, .stepper.rewind li::after { transition-duration: var(--d-2); transition-timing-function: var(--ease-in); }
/* Text colour switches without a transition (one repaint per step, nothing animated) */
.stepper li.active p { color: var(--ink); }
/* Examples stay legible on every step (muted text at full opacity): chips on one line, the short text under them.
   Only the chips of steps not reached yet are toned down. */
.stepper .ex { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-top: 0.8rem; padding: 0.45rem 0.6rem; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 6px; background: var(--surface); font-size: 0.82rem; color: var(--muted); box-shadow: var(--shadow); opacity: 1; transform: translateY(6px); transition: transform 0.4s var(--ease-out); }
.stepper .ex::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid color-mix(in srgb, var(--green) 60%, var(--line)); opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease-out); }
.stepper li.active .ex::after { opacity: 1; }
/* Desaturated only, kept at full opacity: at 0.6 the chip labels fell to ~2.5:1 (need 4.5:1); the filter is not animated */
.stepper .ex-tags { display: flex; align-items: center; }
.stepper li:not(.active):not(.done) .ex-tags { filter: saturate(0.5); }
.stepper .ex-tags i + i { margin-left: 0.25rem; }
.stepper .ex i { font-style: normal; font: 600 0.75rem var(--mono); padding: 0.1rem 0.4rem; border-radius: 6px; background: var(--green-tint); color: var(--green); white-space: nowrap; }
.stepper .ex i.hot { background: var(--score-hi); color: var(--score-hi-ink); }
/* Step 3 names both levers, in the lever colours */
.stepper .ex i.lv-chip.as { background: color-mix(in srgb, var(--lv-assistant) 16%, var(--surface)); color: var(--lv-assistant); }
.stepper .ex i.lv-chip.ag { background: color-mix(in srgb, var(--lv-agent) 16%, var(--surface)); color: var(--lv-agent); }
/* Past steps stay fully legible: the done state is also the autoplay rest state */
.stepper li.done .ex { opacity: 1; transform: none; }
.stepper li.active .ex { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stepper li .ex, .stepper li.done .ex { opacity: 1; transform: none; }
}

/* Stairs: each step is a tread higher than the previous one, the green gets stronger on the way up */
.stepper li { --rise: 1.9rem; --tone: calc(40% + var(--i) * 20%); --fill: calc(4% + var(--i) * 5%); }
.stepper li::before, .stepper li::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-top: 3px solid color-mix(in srgb, var(--green) var(--tone), var(--line)); background: linear-gradient(color-mix(in srgb, var(--green) var(--fill), transparent), transparent 85%); }
/* Active tread: same box drawn in full green over the step, faded in */
.stepper li::after { border-top-color: var(--green); background: linear-gradient(color-mix(in srgb, var(--green) 10%, transparent), transparent 70%); opacity: 0; transition: opacity 0.35s var(--ease-out); }
.stepper li.active::after { opacity: 1; }
.stepper li > :not(.n) { position: relative; z-index: 1; }
@media (min-width: 961px) {
  .timeline.stepper { column-gap: 0; align-items: stretch; padding-bottom: 0.4rem; }
  .stepper li { margin-top: calc((3 - var(--i)) * var(--rise)); padding-inline: 0.9rem; padding-bottom: 1.2rem; }
  /* Tread at the height of the step number, riser down the left edge */
  .stepper li::before, .stepper li::after { inset: 1.35rem 0 0 0; border-left: 1px solid color-mix(in srgb, var(--green) var(--tone), var(--line)); border-radius: 0 6px 0 0; }
  .stepper li::after { border-left-color: transparent; }
  .stepper li:first-child::before, .stepper li:first-child::after { border-left: 0; }
  /* The risers fade out towards their base (static) */
  .stepper li::before, .stepper li::after { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .stepper .n { margin-left: -0.15rem; }
}
@media (max-width: 960px) {
  .stepper li { margin-left: calc(var(--i) * 0.4rem); max-width: calc(100% - var(--i) * 0.4rem); }
  .stepper li::before, .stepper li::after { inset: 1.35rem auto -1.2rem 1.3rem; width: 0; border-top: 0; border-left: 3px solid color-mix(in srgb, var(--green) var(--tone), var(--line)); background: none; }
  .stepper li::after { border-left-color: var(--green); }
  .stepper li:last-child::before, .stepper li:last-child::after { bottom: 0; }
}

/* Animation primitives for the small illustrations. They play once (main.js adds .play the first time a card
   is on screen, and again on pointer or focus), then rest on their final state, which is also the state without
   .play and in reduced motion. Only transform, opacity and clip-path move. --base staggers the cards
   (150 ms each, 600 ms at most), --d orders the parts inside a card. */
.a-grow { display: block; transform-origin: left center; }
/* Sized to its text (not stretched by a grid cell) so each clip step uncovers exactly one character */
.a-type { display: inline-block; width: max-content; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 100%; }
.a-hl { position: relative; isolation: isolate; }
.a-hl::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; border: 1px solid color-mix(in srgb, var(--hue) 45%, var(--line)); background: color-mix(in srgb, var(--hue) 16%, transparent); opacity: 0; pointer-events: none; }
.play :is(.a-grow, .a-grow-y, .a-pop, .a-type, .caret), .play .a-hl::before { animation-duration: 1.2s; animation-delay: calc(var(--base, 0ms) + var(--d, 0s)); animation-iteration-count: 1; animation-fill-mode: both; animation-timing-function: var(--ease-out); }
.play .a-grow { animation-name: lv-grow; }
.play .a-grow-y { animation-name: rv-grow; }
.play .a-pop { animation-name: lv-pop; }
.play .a-type { animation-name: lv-type; animation-timing-function: steps(var(--k, 12)); }
.play .caret { animation-name: lv-caret; animation-timing-function: steps(var(--k, 12)); }
.play .a-hl::before { animation-name: lv-hl; }
/* The only loop left: the Tech logs, slow and linear; it pauses while its card is out of view (.is-off) */
.play .a-scroll { animation: lv-scroll 20s linear infinite; }
.is-off .a-scroll { animation-play-state: paused; }
@keyframes lv-grow { 0% { transform: scaleX(0); } 100% { transform: none; } }
@keyframes rv-grow { 0% { transform: scaleY(0); } 100% { transform: none; } }
@keyframes lv-pop { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
@keyframes lv-type { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0); } }
@keyframes lv-caret { 0% { transform: translateX(calc(-1 * var(--n, 0ch))); } 100% { transform: none; } }
@keyframes lv-scroll { to { transform: translateY(-50%); } }
/* One highlight sweep down the rows, ending on the resting state */
@keyframes lv-hl { 0% { opacity: 0; } 25%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* Roles: the four parts of each card sit on shared rows (subgrid), so a title on two lines no longer
   shifts the text and previews of its row */
@media (min-width: 761px) {
  .grid.four.roles { row-gap: 0; }
  .roles > .card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-items: start; }
  .roles > .card > .rviz { align-self: stretch; }
}
/* Four role cards need ~280 px each: two columns up to 1180 px */
@media (min-width: 761px) and (max-width: 1180px) {
  .grid.four.roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roles > .card:nth-child(n + 3) { margin-top: 1.2rem; }
}

/* Pillars: one hue each, with a small preview of what the pillar shows in the app */
.pillar[data-hue="adopt"] { --hue: var(--hue-adopt); }
.pillar[data-hue="govern"] { --hue: var(--hue-govern); }
.pillar[data-hue="train"] { --hue: var(--hue-train); }
.pillar { position: relative; isolation: isolate; display: flex; flex-direction: column; border-color: color-mix(in srgb, var(--hue) 30%, var(--line)); background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--hue) var(--glow-k), transparent), transparent 70%), var(--surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hue) 50%, transparent), var(--shadow); }
/* Hover shadow drawn once in a pseudo-element (neutral, not coloured); only its opacity animates */
.pillar::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; box-shadow: var(--shadow-hover); opacity: 0; transition: opacity 0.25s var(--ease-out); pointer-events: none; }
.pillar:hover { border-color: color-mix(in srgb, var(--hue) 45%, var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hue) 50%, transparent), var(--shadow); }
.pillar:hover::before { opacity: 1; }
.pillar .badge-ico { color: var(--hue); background: color-mix(in srgb, var(--hue) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--hue) 35%, transparent); }
.pillar .checks li::before { background: var(--hue); }
/* The problem each pillar answers, in the irritant orange */
.pillar .pillar-pain { margin: 0.5rem 0 0; padding: 0.45rem 0.65rem; border-radius: 8px; background: color-mix(in srgb, var(--orange) 8%, var(--surface)); color: var(--ink); font-size: 0.9rem; line-height: 1.45; }
.pillar .pillar-pain b { color: var(--orange-ink); font-weight: 600; }
.pviz { margin: 0.4rem 0 0.2rem; padding: 0.8rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hue) 22%, var(--line)); background: var(--paper); display: grid; gap: 0.4rem; font-size: 0.82rem; }
.pv-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; padding: 0.3rem 0.45rem; border-radius: 8px; border: 1px solid transparent; }
.pv-row .score { min-width: 1.8rem; height: 1.5rem; font-size: 0.78rem; }
.pv-row span:nth-child(2) { min-width: 0; line-height: 1.25; } /* task names wrap, never cut */
.pv-row em { font: 500 0.66rem var(--mono); font-style: normal; text-transform: uppercase; color: var(--muted); }
.pv-tool { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; }
.pv-tool .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--hue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 22%, transparent); }
.pv-tool .dot.pilot { background: var(--hue-train); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue-train) 22%, transparent); }
.pv-tool .dot.review { background: var(--muted); box-shadow: none; }
.pv-tool em { font: 500 0.66rem var(--mono); font-style: normal; text-transform: uppercase; color: var(--muted); }
.pv-ring { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.9rem; }
.pv-ring b { font: 700 1.5rem var(--display); color: var(--ink); display: block; line-height: 1.1; }
.pv-ring small { color: var(--muted); }
/* Progress ring: at rest the full ring; when played (once, 900 ms), two clipped halves rotate in (transform), then
   the full ring takes over again (opacity). main.js counts the label up from 0/6 to 6/6 at the same pace. */
.ring { position: relative; width: 4.2rem; height: 4.2rem; }
.ring svg { display: block; width: 4.2rem; height: 4.2rem; }
.ring circle, .ring path { fill: none; stroke-width: 6; }
.ring .bg { stroke: var(--track); }
.ring .fg { stroke: var(--hue); stroke-linecap: round; }
.ring-full { position: absolute; inset: 0; }
.ring-half { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; opacity: 0; }
.ring-half svg { position: absolute; top: 0; }
.ring-half.r, .ring-half.r svg { right: 0; }
.ring-half.l, .ring-half.l svg { left: 0; }
.play :is(.ring-full, .ring-half, .ring-half svg) { animation-duration: 900ms; animation-delay: calc(var(--base, 0ms) + 0.2s); animation-iteration-count: 1; animation-fill-mode: both; }
.play .ring-full { animation-name: ring-full; }
.play .ring-half { animation-name: ring-half; }
.play .ring-half.r svg { animation-name: ring-r; animation-timing-function: linear; }
.play .ring-half.l svg { animation-name: ring-l; }
@keyframes ring-full { 0%, 99.9% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ring-half { 0%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ring-r { 0% { transform: rotate(-180deg); } 50%, 100% { transform: none; } }
@keyframes ring-l { 0%, 50% { transform: rotate(-180deg); animation-timing-function: var(--ease-out); } 100% { transform: none; } }

/* Segmented controls (lever teams, tour tabs, billing): one indicator under the buttons slides to the pressed
   one (main.js, FLIP with transform only); the pressed button itself is transparent. */
.has-ind { position: relative; isolation: isolate; }
.seg-ind { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 999px; pointer-events: none; transform-origin: left center; }
.seg > .seg-ind { background: var(--surface); box-shadow: inset 0 1px 0 var(--hi), 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--line); }
:is(.tabs, .billing) > .seg-ind { background: var(--green); }
.has-ind > button { transition: none; }
.seg.has-ind button[aria-pressed="true"], .tabs.has-ind button, .tabs.has-ind button[aria-selected="true"], .billing.has-ind button[aria-checked="true"] { background: transparent; box-shadow: none; }
/* The rule above must not remove the focus ring of the selected tab or the checked period (their only tab stop) */
:is(.tabs.has-ind button[aria-selected="true"], .billing.has-ind button[aria-checked="true"]):focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus); }
/* On the green indicator (tabs, billing) the labels change colour when it is half-way (240 ms, symmetric curve):
   a label never turns light while it is still on the light background, nor stays green once it is on green. */
@media (prefers-reduced-motion: no-preference) {
  :is(.tabs, .billing).has-ind > button, .billing.has-ind > button small { transition: color 0s linear 120ms; }
}

/* Levers: example tasks per team, each with the lever it gets */
.levers { overflow: hidden; }
.lv-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.2rem 2rem; }
.lv-head > div { min-width: 0; }
.lv-head h2 { margin-bottom: 0; }
.seg { display: inline-flex; gap: 0.2rem; padding: 0.3rem; border-radius: 999px; border: 1px solid var(--line); background: var(--sunk); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { flex: none; font: 600 0.88rem var(--body); color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 0.5rem 0.95rem; cursor: pointer; transition: color 0.25s var(--ease-out), background-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: inset 0 1px 0 var(--hi), 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--line); }
.lv-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font: 500 0.78rem var(--mono); color: var(--muted); }
.lv-legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.lv-legend li::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 3px; background: var(--lv); }
/* Method step 2: the four levers, and the reminder that some tasks get none */
.lv-none { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.6rem; margin-top: 1.4rem; }
.lv-none .lv-legend { margin: 0; }
.lv-none p { margin: 0; color: var(--ink); font-size: 0.95rem; }
/* Carousel: the track overhangs the column by its padding, so the first card starts on the content edge.
   The next cards fade out on the right; on the left, the fade covers only the overhang, so a card scrolled
   past the content edge fades out instead of being cut, and the first card at rest is untouched. */
.lv-track { position: relative; display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin: 1.4rem -2rem 0; padding: 0.6rem 2rem 1.6rem; scroll-padding-inline: 2rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 4rem), transparent); }
.lv-track::-webkit-scrollbar { display: none; }
/* The edge fade would mask an outer ring: it is dropped while the track has keyboard focus */
.lv-track:focus-visible { -webkit-mask-image: none; mask-image: none; }
.lv-card { --lv: var(--lv-agent); position: relative; flex: 0 0 min(330px, 84vw); min-width: 0; scroll-snap-align: start; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.9rem; padding: 1.2rem 1.2rem 1.1rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--lv) 28%, var(--line)); background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--lv) var(--glow-k), transparent), transparent 72%), var(--surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--lv) 50%, transparent), var(--shadow); isolation: isolate; }
/* Hover glow and pointer spotlight are pseudo-elements: only their opacity animates */
.lv-card::before, .lv-card::after { content: ""; position: absolute; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; }
.lv-card::before { inset: -1px; box-shadow: var(--shadow-hover); transition: opacity 0.35s var(--ease-out); }
.lv-card::after { inset: 0; transition: opacity 0.3s var(--ease-out); background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--lv) 12%, transparent), transparent 70%); }
.lv-card:hover { border-color: color-mix(in srgb, var(--lv) 45%, var(--line)); }
.lv-card:hover::before, .lv-card:hover::after { opacity: 1; }
/* Keyboard focus inside a card rings the whole card (the track padding keeps the ring visible) */
.lv-card:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* One ring only: the card's ring stands for its focused link (the card's one focusable control) */
.lv-card :focus-visible { outline: none; }
.lv-assistant { --lv: var(--lv-assistant); }
.lv-agent { --lv: var(--lv-agent); }
.lv-feature { --lv: var(--lv-feature); }
.lv-keep { --lv: var(--lv-keep); }
.lv-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75rem; }
.lv-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; color: var(--lv); background: color-mix(in srgb, var(--lv) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--lv) 35%, transparent); box-shadow: inset 0 1px 0 var(--hi); }
.lv-ico svg, .lv-go svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lv-top h3 { margin: 0; font-size: 1.02rem; line-height: 1.25; min-width: 0; }
.lv-go { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; border: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--surface) 70%, transparent); transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.lv-go:hover { color: var(--lv); border-color: var(--lv); }
.lv-meta { margin: -0.4rem 0 0; font: 500 0.8rem var(--body); color: var(--muted); padding-bottom: 0.9rem; border-bottom: 1px solid color-mix(in srgb, var(--lv) 18%, var(--line)); }
.lv-viz { position: relative; height: 9.5rem; font-size: 0.8rem; display: grid; align-content: start; gap: 0.45rem; overflow: hidden; }
/* Card foot: score, tag, gain on one line; a tag too long for it (« Fonctionnalité produit ») is never cut,
   the gain moves to a second line, right-aligned */
.lv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.5rem; }
.lv-tag { white-space: nowrap; font: 500 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--lv); background: color-mix(in srgb, var(--lv) 12%, transparent); border: 1px solid color-mix(in srgb, var(--lv) 32%, transparent); padding: 0.15rem 0.5rem; border-radius: 999px; }
.lv-gain { margin-left: auto; white-space: nowrap; font: 700 0.95rem var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.lv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; }
.lv-bar .note { margin: 0; }
.lv-nav { display: flex; align-items: center; gap: 0.6rem; }
.lv-nav button { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: inset 0 1px 0 var(--hi); transition: border-color 0.2s var(--ease-out), opacity 0.2s var(--ease-out); }
.lv-nav button:hover:not([aria-disabled="true"]) { border-color: var(--green); }
.lv-nav button[aria-disabled="true"] { opacity: 0.35; cursor: default; }
/* Pagination dots (phones only): 6 px, the current one green and 18 px wide; it stretches in with a transform */
.lv-dots { display: none; margin-right: auto; gap: 6px; align-items: center; }
.lv-dots i { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 25%, transparent); }
.lv-dots i.on { width: 18px; background: var(--green); transform-origin: left center; animation: dot-on 300ms var(--ease-out); }
@keyframes dot-on { from { transform: scaleX(0.34); } }
@media (max-width: 640px) {
  .lv-track { margin-inline: calc(-1 * var(--gutter)); padding: 0.6rem var(--gutter) 1.4rem; scroll-padding-inline: var(--gutter); gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 20px), transparent); }
  .lv-card { flex: 0 0 calc(100% - 44px); scroll-snap-align: start; scroll-snap-stop: always; }
  /* Order on phones: track, then arrows and dots, then the caption */
  .lv-bar { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .lv-nav { order: -1; justify-content: flex-end; margin-top: 0.5rem; }
  .lv-nav button { width: 44px; height: 44px; }
  .lv-dots { display: flex; }
}
.lv-nav svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lv-nav .prev svg { transform: scaleX(-1); }
/* Lever card illustrations */
.ln { height: 0.45rem; width: var(--w, 70%); border-radius: 99px; background: var(--track); }
.ln.acc { background: color-mix(in srgb, var(--lv) 55%, transparent); }
.viz-doc { padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); align-content: start; }
.doc-head { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.74rem; color: var(--muted); }
.doc-head b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.doc-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem; font: 500 0.72rem var(--mono); color: var(--muted); }
.doc-total { display: flex; justify-content: space-between; border-top: 1px dashed var(--line); padding-top: 0.35rem; font-size: 0.78rem; }
.doc-total b { color: var(--lv); font-family: var(--display); }
.q { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--lv) 40%, var(--line)); background: var(--paper); font: 500 0.78rem var(--mono); }
.q svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }
.caret { width: 1px; height: 1em; background: var(--lv); }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.rows li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 8px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows li.hit { color: var(--ink); background: color-mix(in srgb, var(--lv) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lv) 35%, transparent); }
.fld { display: grid; grid-template-columns: 6.6rem 1fr; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); }
.fld small { color: var(--muted); font-size: 0.72rem; }
.fld .a-type { font: 500 0.74rem var(--mono); }
.done-chip { justify-self: start; font: 600 0.72rem var(--body); color: var(--lv); padding: 0.15rem 0.5rem; border-radius: 99px; background: color-mix(in srgb, var(--lv) 12%, transparent); }
.cols-head { display: grid; grid-template-columns: 1fr 1.5rem 1fr 1rem; gap: 0.4rem; font: 500 0.66rem var(--mono); text-transform: uppercase; color: var(--muted); }
.pair { display: grid; grid-template-columns: 1fr 1.5rem 1fr 1rem; align-items: center; gap: 0.4rem; font: 500 0.7rem var(--mono); }
.pair > span { padding: 0.3rem 0.4rem; border-radius: 7px; border: 1px solid var(--line); background: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair i { height: 2px; background: var(--lv); border-radius: 2px; }
.pair b { color: var(--lv); font-size: 0.85rem; }
.inv { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); font: 500 0.72rem var(--mono); }
.inv .late { color: var(--orange-ink); }
.stat { display: grid; justify-self: end; }
.stat i { grid-area: 1 / 1; font-style: normal; padding: 0.12rem 0.45rem; border-radius: 99px; text-align: center; white-space: nowrap; }
.stat .s-a { color: var(--muted); background: var(--sunk); }
.stat .s-b { color: var(--lv); background: color-mix(in srgb, var(--lv) 14%, var(--surface)); }
.bub { max-width: 86%; padding: 0.4rem 0.65rem; border-radius: 12px; line-height: 1.35; }
.bub.me { justify-self: end; background: var(--sunk); border-bottom-right-radius: 4px; }
.bub.bot { justify-self: start; background: color-mix(in srgb, var(--lv) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--lv) 30%, transparent); border-bottom-left-radius: 4px; }
.kan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; height: 9.5rem; }
.kan > div { display: grid; align-content: start; gap: 0.3rem; padding: 0.4rem; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); }
.kan small { font: 500 0.62rem var(--mono); text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk { height: 1.15rem; border-radius: 5px; background: color-mix(in srgb, var(--lv) 22%, var(--surface)); border: 1px solid color-mix(in srgb, var(--lv) 35%, transparent); }
.tkt { padding: 0.45rem 0.6rem; border-radius: 9px; border: 1px solid var(--line); background: var(--paper); }
.tkt small { font: 500 0.66rem var(--mono); color: var(--muted); display: block; }
.reply { display: grid; gap: 0.35rem; padding: 0.55rem 0.6rem; border-radius: 9px; border: 1px dashed color-mix(in srgb, var(--lv) 45%, var(--line)); }
.viz-keep { place-content: center; justify-items: center; text-align: center; gap: 0.5rem; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); padding: 0.8rem; }
.viz-keep svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: var(--lv); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.viz-keep p { margin: 0; font-size: 0.82rem; max-width: 24ch; }
.cl-head { font: 500 0.72rem var(--mono); color: var(--muted); }
/* Release notes: fixed column for the chips, the list fades out at the bottom of the preview */
.cl { -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.cl li { display: grid; grid-template-columns: 6.2rem 1fr; align-items: center; padding-inline: 0; }
.cl i { justify-self: start; font: 500 0.62rem var(--mono); text-transform: uppercase; font-style: normal; padding: 0.1rem 0.4rem; border-radius: 5px; color: var(--lv); background: color-mix(in srgb, var(--lv) 12%, transparent); }
.cl i.fix { color: var(--muted); background: var(--sunk); }
.logs { position: relative; height: 9.5rem; overflow: hidden; border-radius: 10px; background: #10231d; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.logs ul { list-style: none; margin: 0; padding: 0.5rem 0.7rem; display: grid; gap: 0.2rem; font: 400 0.68rem/1.5 var(--mono); color: #9caba2; }
.logs .err { color: #ffd2c2; background: rgba(240, 138, 69, 0.18); border-radius: 4px; padding-inline: 0.3rem; margin-inline: -0.3rem; }
.dep { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); font: 500 0.72rem var(--mono); }
.dep span:nth-child(2) { color: var(--muted); }
.dep b { color: var(--lv); font-weight: 500; }

/* Roles in the brand colours: Managers and AI lead take the pillar where they act most, Employees the orange of
   the irritants they flag, Leadership stays neutral (green preview). Lift on hover, preview of what they see. */
.role[data-role="direction"] { --hue: var(--muted); }
.role[data-role="manager"] { --hue: var(--hue-adopt); }
.role[data-role="referent"] { --hue: var(--hue-govern); }
.role[data-role="collab"] { --hue: var(--orange); }
.role { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 0.2rem; border-color: color-mix(in srgb, var(--hue) 30%, var(--line)); background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--hue) var(--glow-k), transparent), transparent 70%), var(--surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hue) 50%, transparent), var(--shadow); }
.role::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; box-shadow: var(--shadow-hover); opacity: 0; transition: opacity 0.5s var(--ease-out); pointer-events: none; }
.card.role:hover { border-color: color-mix(in srgb, var(--hue) 45%, var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hue) 50%, transparent), var(--shadow); }
/* Leadership preview in the brand green: the current month full, the earlier ones at 45 % */
.role[data-role="direction"] .rv-chart i { background: color-mix(in srgb, var(--green) 45%, transparent); }
.role[data-role="direction"] .rv-chart i.now { background: var(--green); }
.role:hover::before { opacity: 1; }
.role .badge-ico { width: 3.2rem; height: 3.2rem; border-radius: 14px; color: var(--hue); background: color-mix(in srgb, var(--hue) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--hue) 35%, transparent); transition: transform 0.5s var(--ease-out); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .role:hover .badge-ico { transform: scale(1.04); }
}
.role h3 { margin-bottom: 0; }
.role .rtag { display: inline-flex; align-self: flex-start; justify-self: start; margin: 0.5rem 0 0.75rem; font: 500 0.68rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; color: color-mix(in srgb, var(--hue) 70%, var(--ink)); background: color-mix(in srgb, var(--hue) 12%, transparent); border: 1px solid color-mix(in srgb, var(--hue) 30%, transparent); }
.role .rviz { display: grid; gap: 0.4rem; margin-top: auto; padding: 0.7rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hue) 22%, var(--line)); background: var(--paper); font-size: 0.8rem; min-height: 5.5rem; align-content: center; }
.role > p { flex: 0 0 auto; margin-bottom: 0.8rem; }

.rviz .dot.half { background: color-mix(in srgb, var(--hue) 45%, var(--surface)); }
.rv-bars { grid-template-columns: auto 1fr; align-items: end; gap: 0.8rem; }
.rv-chart { display: flex; align-items: end; gap: 0.3rem; height: 3.4rem; }
.rv-chart i { width: 0.7rem; height: var(--h); border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--hue) 40%, var(--line)); transform-origin: bottom; }
.rv-chart i.now { background: var(--hue); }
.rv-kpi b { display: block; font: 700 1.25rem var(--display); color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.rv-kpi small { color: var(--muted); }
.rv-say { padding: 0.45rem 0.6rem; border-radius: 10px 10px 10px 3px; background: color-mix(in srgb, var(--hue) 12%, var(--surface)); color: var(--ink); justify-self: start; }
.rv-sent { display: inline-flex; align-items: center; gap: 0.35rem; font: 500 0.7rem var(--mono); color: color-mix(in srgb, var(--hue) 70%, var(--ink)); }
.rv-sent svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* Phones (≤ 640 px): compact cards, icon beside the title, the rest full width */
@media (max-width: 640px) {
  section { padding: 3.5rem 0; }
  .grid > .pillar, .roles > .role { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.8rem; align-items: center; padding: 1.25rem; }
  .grid > .pillar > *, .roles > .role > * { grid-column: 1 / -1; }
  .grid > .pillar > .badge-ico, .roles > .role > .badge-ico { grid-column: 1; width: 2.5rem; height: 2.5rem; border-radius: 10px; margin: 0; }
  .grid > .pillar > h3, .roles > .role > h3 { grid-column: 2; margin: 0; }
  .grid > .pillar > p, .roles > .role > p { margin: 0.6rem 0 0.8rem; }
  .badge-ico svg { width: 1.2rem; height: 1.2rem; }
  /* Tour tabs on one scrolling line, 44 px targets, the cut tab fades out */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; min-height: 44px; scroll-snap-align: start; }
  /* Phone crop of the screens (no sidebar) */
  .tour-stack { aspect-ratio: 900 / 1000; }
}
/* Terminal: when the command scrolls sideways, its right edge fades until the end is reached */
.cmd-wrap { position: relative; }
.cmd-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px; pointer-events: none; background: linear-gradient(90deg, transparent, #10231d); opacity: 0; transition: opacity var(--d-2) var(--ease-out); }
.cmd-wrap.can-scroll::after { opacity: 1; }
.cmd-wrap.can-scroll.at-end::after { opacity: 0; }
.cmd { overscroll-behavior-x: contain; }
.kbar-btn:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }
/* Touch screens: no keyboard hints, bigger buttons */
@media (hover: none) {
  .kbar kbd { display: none; }
  .kbar-btn { min-height: 44px; padding: 0.5rem 0.9rem; border: 1px solid var(--line); border-radius: 10px; }
}
/* Phones (≤ 480 px): calculator choices as three-cell segmented grids */
@media (max-width: 480px) {
  /* Words are never cut: each cell is at least as wide as its longest word (min-content, soft hyphens ignored by
     hyphens: none), the rest is shared equally; labels wrap between words only (« Toute / l'entreprise »). */
  .calc { padding: 1.4rem 1.1rem; }
  .calc-form .opts { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--sunk); }
  .calc-form label { min-height: 44px; display: grid; place-items: center; text-align: center; font-size: 0.85rem; line-height: 1.15; padding: 0.4rem 0.25rem; border-radius: 9px; border-color: transparent; -webkit-hyphens: none; hyphens: none; }
  .calc-out { margin-inline: 0; }
}
/* Very narrow phones (< 360 px): slightly smaller labels and card padding, so the longest words still fit at 320 px */
@media (max-width: 359px) {
  .calc { padding-inline: 0.9rem; }
  .calc-form label { font-size: 0.78rem; padding-inline: 0.15rem; }
}
/* Below 320 px only, as a last resort: words may break at their soft hyphen, then anywhere */
@media (max-width: 319px) {
  .calc-form .opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc-form label { min-width: 0; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; }
}

/* Trial form (built by main.js only when SITE.live.trial is on) */
.trial-form { display: grid; gap: 1rem; max-width: 46rem; margin-top: 2rem; }
.tf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.tf-row { display: grid; gap: 0.35rem; align-content: start; }
.tf-row > label { font-weight: 600; font-size: 0.95rem; }
.tf-opt { font-weight: 400; color: var(--muted); }
.trial-form :is(input:not([type="checkbox"]), select) { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--muted); border-radius: var(--radius); padding: 0.7rem 0.85rem; min-height: 48px; width: 100%; box-sizing: border-box; }
.trial-form [aria-invalid="true"] { border-color: var(--orange-ink); box-shadow: 0 0 0 1px var(--orange-ink); }
.tf-hint, .tf-slug, .tf-status { margin: 0; font-size: 0.9rem; color: var(--muted); }
.tf-err { margin: 0; font-size: 0.9rem; color: var(--orange-ink); }
.tf-err:empty, .tf-slug:empty, .tf-status:empty { display: none; }
.tf-summary { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--orange-ink); border-radius: var(--radius); background: var(--orange-tint); color: var(--ink); }
.tf-summary[hidden] { display: none; }
.tf-check { grid-template-columns: auto 1fr; align-items: start; column-gap: 0.65rem; }
.tf-check > .tf-err { grid-column: 2; }
.tf-check input { width: 1.2rem; height: 1.2rem; margin-top: 0.15rem; accent-color: var(--green); }
.tf-check > label { font-weight: 400; }
.tf-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.trial-form .actions { margin: 0; }
.trial-form .button:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 640px) { .tf-grid { grid-template-columns: 1fr; } .trial-form .button { width: 100%; justify-content: center; } }