/* ========================================================================
   Fonts (self-hosted)
   ======================================================================== */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-700-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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plusjakarta-400-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plusjakarta-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plusjakarta-500-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plusjakarta-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Local serif — used only for the hero manifesto accent ("transforme"),
   wrapped in a highlighter-style light-blue background. */
@font-face {
  font-family: 'Hero Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/serif.woff2') format('woff2');
}

/* ========================================================================
   Design tokens (CSS variables)
   ======================================================================== */

:root {
  /* colors */
  --c-bg: #FAFAFA;
  --c-white: #FFFFFF;
  --c-blue: #24A7DA;
  --c-blue-hover: #1d4ed8;
  --c-blue-soft: #E8F5FB;  /* very light blue — emphasis backgrounds */
  --c-ink: #0F1014;
  --c-ink-soft: #5C5F66;
  --c-line: #E6E7EB;

  /* typography */
  --ff-heading: 'Figtree', system-ui, -apple-system, sans-serif;
  --ff-body: 'Figtree', system-ui, -apple-system, sans-serif;

  /* Sans-serif test palette — loaded via Google Fonts CDN (see base.php).
     Swap --ff-body or --ff-heading to one of these to try a font globally.
     Example: --ff-body: var(--ff-sans1); */
  --ff-sans1: 'Inter', system-ui, -apple-system, sans-serif;
  --ff-sans2: 'Manrope', system-ui, -apple-system, sans-serif;
  --ff-sans3: 'DM Sans', system-ui, -apple-system, sans-serif;
  --ff-sans4: 'Outfit', system-ui, -apple-system, sans-serif;
  --ff-sans5: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --ff-sans6: 'Figtree', system-ui, -apple-system, sans-serif;

  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1rem, 1.6vw, 1.2rem);
  --fs-xl: clamp(1.25rem, 2vw, 1.5rem);
  --fs-h1: clamp(2.5rem, 4.8vw, 3.875rem);

  /* spacing scale (rem) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* motion */
  --ease-fluid: cubic-bezier(.8, 0, 0, .9);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;

  /* layout */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);
  --header-h: 72px;
}

/* ========================================================================
   Base resets
   ======================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--c-ink);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================================================
   Container utility
   ======================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow {
  max-width: 880px;
}

/* ========================================================================
   Section head — shared eyebrow / title / description block
   ======================================================================== */

.section-head { margin: 0 auto var(--s-7); }
.section-head--center { text-align: center; }
.section-head--left { text-align: left; }
.section-head__eyebrow {
  display: inline-block;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-blue);
  background: var(--c-blue-soft);
  padding: 0.2em 0.6em;
  border-radius: 8px;
  margin-bottom: var(--s-3);
}
.section-head__title {
  font-family: var(--ff-heading);
  font-weight: 600;
  /* Mobile bumped from 1.875rem → 2.125rem for better legibility on small screens. */
  font-size: clamp(2.125rem, 3.6vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-wrap: balance;
  max-width: 30ch;
  margin-inline: auto;
  /* Preserve hard line breaks from YAML "|" block scalars so multi-sentence
     titles (e.g. "Une voix. Trois tickets. Dix secondes.") can be split for
     rhythm without an <br> tag. */
  white-space: pre-line;
}
.section-head--left .section-head__title { margin-inline: 0; }
.section-head__title--small {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}
.section-head__description {
  margin: var(--s-4) auto 0;
  max-width: 62ch;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-ink-soft);
  text-wrap: pretty;
  /* Respect intentional YAML newlines (block scalar `|`) so manual line
     breaks render — used on Solutions and Features descriptions. */
  white-space: pre-line;
}
.section-head--left .section-head__description { margin-left: 0; }
/* Inline brand-blue bold for signatures like "Tout est à portée de voix !" */
.section-head__signature {
  color: var(--c-blue);
  font-weight: 700;
}

/* ========================================================================
   Button
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 1.1rem 1.5rem;
  border-radius: var(--r-full);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: 1;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition:
    transform var(--dur-fast) var(--ease-fluid),
    background-color var(--dur-fast) var(--ease-fluid),
    color var(--dur-fast) var(--ease-fluid),
    border-color var(--dur-fast) var(--ease-fluid),
    box-shadow var(--dur-fast) var(--ease-fluid);
  will-change: transform;
}
.btn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-blue); color: var(--c-white); }
.btn--primary:hover { background: var(--c-blue-hover); }

.btn--secondary {
  background: var(--c-white);
  color: var(--c-ink);
  border-color: var(--c-line);
  box-shadow: 0 1px 2px rgba(15, 16, 20, 0.04);
}
.btn--secondary:hover {
  border-color: rgba(15, 16, 20, 0.15);
  box-shadow: 0 4px 14px rgba(15, 16, 20, 0.06);
}

/* ========================================================================
   Header
   ======================================================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  transition:
    background-color var(--dur-base) var(--ease-fluid),
    backdrop-filter var(--dur-base) var(--ease-fluid),
    box-shadow var(--dur-base) var(--ease-fluid),
    border-color var(--dur-base) var(--ease-fluid);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--c-line);
}

.header__inner {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-5);
}

.header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--c-ink);
  text-decoration: none;
}
.header__logo img {
  display: block;
  height: 28px;
  width: auto;
}

.header__nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.header__nav-link {
  display: inline-block;
  padding: var(--s-2) 0;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  transition: color var(--dur-fast) var(--ease-fluid);
}
.header__nav-link:hover { color: var(--c-ink); }
.header__nav-link:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 4px;
  border-radius: 4px;
}

.header__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.header__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.8125rem;
  background: var(--c-white);
}
.header__lang-current { color: var(--c-ink); }
.header__lang-sep { color: var(--c-ink-soft); opacity: 0.5; }
.header__lang-link {
  color: var(--c-ink-soft);
  transition: color var(--dur-fast) var(--ease-fluid);
}
.header__lang-link:hover { color: var(--c-ink); }

/* Burger button — hidden on desktop. */
.header__burger {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
}
.header__burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-fluid), opacity 0.2s linear, top 0.25s var(--ease-fluid);
}
.header__burger span:nth-child(1) { top: 13px; }
.header__burger span:nth-child(2) { top: 19px; }
.header__burger span:nth-child(3) { top: 25px; }
.header__burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

/* Mobile drawer — fixed full-screen panel below the header. */
.mobile-drawer {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--c-white);
  z-index: 90;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease-fluid), transform 0.25s var(--ease-fluid), visibility 0s linear 0.25s;
}
.mobile-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s var(--ease-fluid), transform 0.25s var(--ease-fluid);
}
.mobile-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-6) var(--s-5) var(--s-9);
  max-width: 720px;
  margin: 0 auto;
}
.mobile-drawer__link {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--c-ink);
  text-decoration: none;
  padding: var(--s-2) 0;
}
.mobile-drawer__group {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.mobile-drawer__group-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.mobile-drawer__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.mobile-drawer__group ul a {
  display: block;
  padding: var(--s-2) 0;
  color: var(--c-ink);
  text-decoration: none;
  font-size: 1.0625rem;
}
.mobile-drawer__cta {
  margin-top: var(--s-3);
  align-self: flex-start;
}

/* Prevent body scroll while the drawer is open. */
body.is-drawer-open { overflow: hidden; }

@media (max-width: 1024px) {
  .header__inner { grid-template-columns: auto 1fr; }
  .header__nav { display: none; }
  .header__burger { display: inline-block; }
}
@media (min-width: 1025px) {
  .mobile-drawer { display: none; }
}
@media (max-width: 540px) {
  .header__cta { display: none; }
}

/* ========================================================================
   Mega menu
   ======================================================================== */

.mega { position: relative; }
.mega__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  background: transparent;
  border: 0;
  color: var(--c-ink-soft);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-fluid);
}
.mega__trigger:hover { color: var(--c-ink); }
.mega__trigger:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 4px;
  border-radius: 4px;
}
.mega__trigger[aria-expanded="true"] { color: var(--c-ink); }
.mega__chevron { transition: transform var(--dur-fast) var(--ease-fluid); }
.mega__trigger[aria-expanded="true"] .mega__chevron { transform: rotate(180deg); }

.mega__panel {
  position: absolute;
  top: calc(100% + var(--s-3));
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-fluid),
    transform var(--dur-base) var(--ease-fluid);
  z-index: 60;
}
.mega[data-open] .mega__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega__panel-inner {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(15, 16, 20, 0.08);
  padding: var(--s-4);
  min-width: 280px;
  max-width: calc(100vw - 32px);
}
.mega__panel--wide .mega__panel-inner {
  width: min(1024px, calc(100vw - 32px));
  padding: var(--s-5);
}

/* Solutions panel */
.solutions-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 240px;
}
.solutions-panel__item {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-base);
  color: var(--c-ink);
  transition:
    background-color var(--dur-fast) var(--ease-fluid),
    color var(--dur-fast) var(--ease-fluid);
}
.solutions-panel__item:hover {
  background: var(--c-bg);
  color: var(--c-blue);
}

/* Features panel: 2 columns (bento | list) */
.features-panel {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-5);
}
/* Bento layout — NOVA hero on top (1/3) + 2x2 grid of 4 main feature
   cards below (2/3). The right column (.features-panel__list) drives
   the overall panel height. */
.features-panel__bento {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--s-3);
}
/* NOVA hero — full-bleed Getty image background with a dark overlay so
   the title and eyebrow stay readable in white. */
.features-panel__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-5);
  min-height: 120px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--c-white);
  background:
    linear-gradient(135deg, rgba(11, 19, 43, 0.78) 0%, rgba(11, 19, 43, 0.45) 60%, rgba(11, 19, 43, 0.65) 100%),
    url('/uploads/nova_menu.jpg') center / cover no-repeat;
  transition:
    transform var(--dur-base) var(--ease-fluid),
    border-color var(--dur-base) var(--ease-fluid);
}
.features-panel__hero:hover { border-color: rgba(255, 255, 255, 0.32); }
.features-panel__hero-eyebrow {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.78);
}
.features-panel__hero-title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--c-white);
  letter-spacing: -0.01em;
}

.features-panel__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--s-3);
}
/* Blue cards (Gestion des incidents / Gestion des accès) — white text,
   inset quarter-circle decorations like the cta-banner. */
.features-panel__card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: var(--s-4) var(--s-5);
  background: var(--c-blue);
  border: 0;
  border-radius: var(--r-md);
  color: var(--c-white);
  transition:
    background-color var(--dur-fast) var(--ease-fluid),
    transform var(--dur-fast) var(--ease-fluid);
}
.features-panel__card:hover {
  background: var(--c-blue-dark, #1d4ed8);
}
.features-panel__card::before,
.features-panel__card::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border: 4px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}
.features-panel__card::before { top: -90px;    left: -90px;  }
.features-panel__card::after  { bottom: -90px; right: -90px; }
.features-panel__card-title {
  position: relative;
  z-index: 1;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--c-white);
}

.features-panel__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s-5);
  border-left: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.features-panel__list a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.5rem 0;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  transition: color var(--dur-fast) var(--ease-fluid);
}
.features-panel__list a:hover { color: var(--c-ink); }
.features-panel__list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c-blue-soft);
  color: var(--c-blue);
  flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease-fluid),
              color var(--dur-fast) var(--ease-fluid);
}
.features-panel__list a:hover .features-panel__list-icon {
  background: var(--c-blue);
  color: var(--c-white);
}

/* Icon badges on the bento featured cards. NOVA hero gets a floating
   disc in the top-right of the bg image; the 4 small blue cards get an
   inline disc on the left of the title. */
.features-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: var(--c-white);
  z-index: 1;
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}
.features-panel__icon--hero {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 36px;
  height: 36px;
}
.features-panel__icon--card { margin-right: var(--s-3); }

/* Mobile drawer feature list icons — same blue-tinted pill as desktop. */
.mobile-drawer__group ul a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.mobile-drawer__list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c-blue-soft);
  color: var(--c-blue);
  flex-shrink: 0;
}

/* ========================================================================
   Hero (homepage — title + typing pings)
   ======================================================================== */

.hero {
  padding-top: calc(var(--header-h) + var(--s-9));
  padding-bottom: var(--s-9);
}
.hero__inner {
  position: relative;
  text-align: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0.875rem var(--s-2) 0.5rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  box-shadow: 0 1px 2px rgba(15, 16, 20, 0.03);
}
.hero__eyebrow--social { padding-left: 0.375rem; }

.hero__avatars { display: inline-flex; align-items: center; }
.hero__avatars img {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 2px solid var(--c-white);
  object-fit: cover;
  background: var(--c-line);
}
.hero__avatars img + img { margin-left: -10px; }

.hero__eyebrow-text { line-height: 1; color: var(--c-ink); }

/* H1 SEO kicker (small, uppercase, blue) — sits above the social-proof pill / title */
.hero__h1-kicker {
  display: inline-block;
  margin: 0 auto var(--s-3);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-blue);
  line-height: 1;
}

.hero__title {
  margin-top: var(--s-5);
  margin-left: auto;
  margin-right: auto;
  max-width: 22ch;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.05;
  white-space: pre-line;
}
/* Solution pages (bureaux, foncieres, hospitality) get a slightly wider
   measure so the longer headings don't wrap awkwardly. */
.page-solutions .hero__title {
  max-width: 27ch;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-wrap: balance;
}

.hero__sub {
  margin-top: var(--s-5);
  margin-left: auto;
  margin-right: auto;
  max-width: 52ch;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* Hero pings (typing bubbles around the title) */
.hero-pings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --ping-top: 12%;
  --ping-bottom: 22%;
  --ping-side-x: 4%;
  --ping-typing-duration: 1s;
  --ping-reveal-duration: 0.4s;
}
.hero-ping {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  opacity: 0;
  animation: hero-ping-enter 0.5s var(--ease-fluid) var(--ping-start, 0s) forwards;
  will-change: opacity, transform;
}
.hero-ping--left { flex-direction: row-reverse; }
.hero-ping--right { flex-direction: row; }

.hero-ping--1 { top: var(--ping-top); left: var(--ping-side-x); --ping-start: 0.4s; }
.hero-ping--3 { top: var(--ping-top); right: var(--ping-side-x); --ping-start: 1.9s; }
.hero-ping--2 { bottom: var(--ping-bottom); left: var(--ping-side-x); --ping-start: 3.4s; }
.hero-ping--4 { bottom: var(--ping-bottom); right: var(--ping-side-x); --ping-start: 4.9s; }

.hero-ping__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--c-white);
  background: var(--c-line);
  box-shadow: 0 2px 8px rgba(15, 16, 20, 0.08);
  flex-shrink: 0;
  object-fit: cover;
}

.hero-ping__bubble {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.5rem 0.875rem;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  box-shadow: 0 4px 14px rgba(15, 16, 20, 0.06);
  white-space: nowrap;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--c-ink);
  overflow: hidden;
}

.hero-ping__typing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
  flex-shrink: 0;
  max-width: 30px;
  animation: hero-ping-typing-collapse var(--ping-reveal-duration) var(--ease-fluid)
    calc(var(--ping-start, 0s) + 0.4s + var(--ping-typing-duration)) forwards;
}
.hero-ping__typing > span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-blue);
  opacity: 0.35;
  animation: hero-ping-typing 1.2s infinite var(--ease-fluid);
}
.hero-ping__typing > span:nth-child(2) { animation-delay: 0.16s; }
.hero-ping__typing > span:nth-child(3) { animation-delay: 0.32s; }

.hero-ping__text {
  line-height: 1;
  opacity: 0;
  animation: hero-ping-text-reveal var(--ping-reveal-duration) var(--ease-fluid)
    calc(var(--ping-start, 0s) + 0.4s + var(--ping-typing-duration) + 0.1s) forwards;
}

@keyframes hero-ping-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hero-ping-typing {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}
@keyframes hero-ping-typing-collapse {
  0%   { max-width: 30px; opacity: 1; margin-right: 0; }
  60%  { opacity: 0; }
  100% { max-width: 0; opacity: 0; margin-right: -8px; }
}
@keyframes hero-ping-text-reveal {
  from { opacity: 0; transform: translateX(-3px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Marquee (hero logos) */
.hero__marquee {
  margin-top: var(--s-9);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.hero__marquee-track {
  display: flex;
  gap: var(--s-7);
  width: max-content;
  animation: hero-marquee 32s linear infinite;
  will-change: transform;
}
.hero__marquee-item {
  display: flex;
  align-items: center;
  height: 32px;
  flex-shrink: 0;
}
.hero__marquee-item img {
  height: 28px;
  width: auto;
  opacity: 0.6;
  filter: grayscale(100%);
  transition: opacity var(--dur-base) var(--ease-fluid), filter var(--dur-base) var(--ease-fluid);
}
.hero__marquee:hover .hero__marquee-item img {
  opacity: 0.85;
  filter: grayscale(0%);
}

@keyframes hero-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 1100px) {
  .hero-pings { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__marquee-track { animation: none; }
  .hero-ping { opacity: 1; animation: none; }
  .hero-ping__typing { animation: none; max-width: 0; opacity: 0; margin-right: -8px; }
  .hero-ping__typing > span { animation: none; opacity: 1; }
  .hero-ping__text { opacity: 1; animation: none; transform: none; }
}

@media (max-width: 540px) {
  .hero { padding-top: calc(var(--header-h) + var(--s-7)); }
  .hero__ctas { flex-direction: column; align-items: stretch; }
}

/* ========================================================================
   HeroSplit (two-column hero used on feature pages)
   ======================================================================== */

.hero-split {
  padding-top: calc(var(--header-h) + var(--s-4));
  padding-bottom: var(--s-9);
}
/* Home hero — direct child of <main> — uses a tighter padding-top per design. */
main > section.hero-split { padding-top: 4.5rem; }
/* Incidents hero — desktop only, tighter padding-bottom so the morphing
   phone leaves the hero with less empty space underneath. Mobile keeps
   the default to preserve room below the stacked phone. */
@media (min-width: 1025px) {
  .page-incidents .hero-split { padding-bottom: 1rem; }
}
.hero-split--compact {
  padding-top: calc(var(--header-h) + var(--s-7));
  padding-bottom: var(--s-7);
}

.hero-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
}
.hero-split__left { min-width: 0; }
.hero-split__right {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ========================================================================
   Hero centered — variant of hero-split with the text centered above and
   the phone visual centered below, deliberately overflowing the 100vh
   viewport so its lower half peeks under the fold ("scroll for more"
   reveal). Used as an alternative home hero (tweak by switching the
   `type:` in home.yaml between hero-split and hero-centered).
   ======================================================================== */
.hero-centered {
  position: relative;
  min-height: 100vh;
  padding-top: calc(var(--header-h) + var(--s-4));
  padding-bottom: 0;
  overflow: hidden;
}
.hero-centered__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Vertically center the whole composition (text + phone) in the hero. */
  justify-content: center;
  text-align: center;
  min-height: calc(100vh - var(--header-h) - var(--s-5));
  gap: var(--s-5);
}
.hero-centered__text {
  max-width: 60ch;
  margin: 0 auto;
}
.hero-centered__text .hero-content { align-items: center; }
/* Hide the scroll-hint Lottie in this variant even when the data says yes. */
.hero-centered__text .hero-content__scroll-hint { display: none; }
.hero-centered__visual {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  /* Phone visible only as top half: clip the lower half right at the
     visual's own midline. .hero-centered also clips at hero bottom, but
     this lets the phone be cut at its midline regardless of viewport. */
  align-self: stretch;
}
.hero-centered__visual .nova-demo {
  /* Drop the carousel cards in this layout — only the phone is shown,
     full-bleed centered. */
  justify-content: center;
  min-height: 0;
}
.hero-centered__visual .nova-demo__strip,
.hero-centered__visual .nova-demo__cards,
.hero-centered__visual .nova-demo__pills { display: none; }
.hero-centered__visual .nova-demo__phone-wrap {
  /* Phone overflows the visual below; the hero's overflow:hidden then clips
     it at the hero bottom edge. translateY is purely visual so layout stays
     stable while vertical centering positions the (text + half phone)
     composition. */
  position: relative;
  transform: translateY(50%);
}
@media (max-width: 1024px) {
  .hero-centered {
    min-height: auto;
    padding-bottom: var(--s-7);
  }
  .hero-centered__inner { min-height: 0; gap: var(--s-6); justify-content: flex-start; }
  .hero-centered__visual .nova-demo__phone-wrap { transform: none; }
}

@media (max-width: 1024px) {
  .hero-split__inner {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
  .hero-split__right { order: 2; }
}

/* ========================================================================
   Hero PANEL — text left, big rounded blue frame right. Phone is straight
   (no tilt, no shadow) anchored to the left of the frame and overflows the
   frame bottom (overflow:hidden clips it). NOVA cards stack beside.
   Third variant of the hero tweak (split / centered / panel).
   ======================================================================== */
.hero-panel {
  position: relative;
  padding-top: calc(var(--header-h, 72px) + var(--s-4));
  padding-bottom: var(--s-7);
}
.hero-panel__inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--s-7);
  align-items: center;
}
.hero-panel__left { min-width: 0; }
.hero-panel__right { min-width: 0; }

/* The blue frame — rounded, padded, overflow-clipped so the phone's bottom
   gets cut. Background is the brand's "soft blue". */
.hero-panel__frame {
  position: relative;
  background: var(--c-blue-soft, #E8F5FB);
  border-radius: 32px;
  padding: var(--s-7) var(--s-6) 0;
  overflow: hidden;
  min-height: 560px;
}

/* Tame nova-demo for this layout — no min-height pressure, no peek mask. */
.hero-panel .nova-demo {
  min-height: 0;
  align-items: flex-end;
  gap: var(--s-5);
}
.hero-panel .nova-demo__phone-wrap {
  /* Phone sticks out the panel bottom by ~64px (clipped). */
  margin-bottom: -64px;
  align-self: flex-end;
}

/* Phone itself — straight, no shadow, no tilt. Scoped to .hero-panel so
   other heros keep their tilt/skin. */
.hero-panel .iphone--tilt { transform: none; }
.hero-panel .iphone,
.hero-panel .iphone__frame { box-shadow: none; }

/* Cards strip — vertically anchored top so cards stack from the top of the
   frame rather than centering against the phone. */
.hero-panel .nova-demo__strip {
  align-self: flex-start;
  margin-top: var(--s-3);
}

@media (max-width: 1024px) {
  .hero-panel__inner {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .hero-panel__right { order: 2; }
  .hero-panel__frame {
    padding: var(--s-6) var(--s-5) 0;
    min-height: 0;
  }
  .hero-panel .nova-demo__phone-wrap { margin-bottom: -40px; }
}

/* All hero-split phones — slightly smaller (proportions preserved via scale)
   with a small font bump to keep the screen readable. Applied universally so
   every feature page hero matches the home one. */
.hero-split .iphone--tilt {
  transform: perspective(1300px) rotateY(-16deg) rotateX(6deg) scale(0.8);
}
.hero-split .iphone__statusbar { font-size: 15px; }
.hero-split .nova-window__brand { font-size: 18px; }
.hero-split .nova-window__textarea { font-size: 16px; }
.hero-split .nova-msg { font-size: 16.5px; }
.hero-split .nova-room__title { font-size: 16px; }
.hero-split .nova-room__subtitle { font-size: 14px; }
.hero-split .nova-room__chip { font-size: 13px; }
.hero-split .nova-chip { font-size: 14px; }

/* Hero cards next to the phone — flatten everything: just text in flow.
   No glass, no border, no radius, no padding, no avatar, no card-shift. */
.hero-split .nova-demo__cards {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  z-index: 0;
  gap: 0;
  width: auto;
  max-width: none;
}
.hero-split .nova-demo__card,
.hero-split .nova-demo__card:hover,
.hero-split .nova-demo__card[aria-selected="true"] {
  --card-shift: 0;
  grid-template-columns: 1fr;
  column-gap: 0;
  padding-block: 16px;
  padding-inline: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hero-split .nova-demo__card-avatar { display: none; }
.hero-split .nova-demo__card-tag,
.hero-split .nova-demo__progress { display: none; }
.hero-split .nova-demo__card {
  opacity: 0.64;
  transition: opacity var(--dur-base) var(--ease-fluid);
}
.hero-split .nova-demo__card[aria-selected="true"] { opacity: 1; }

/* === Card body = iMessage chat bubble. Applies on both desktop AND mobile.
   Avatar + name sit in a neutral header ABOVE the bubble; the prompt is
   the blue bubble with a "from me" tail at the bottom-right. */
.hero-split .nova-demo__card-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--c-ink-soft);
}
.hero-split .nova-demo__card-headshot {
  width: 18px;
  height: 18px;
}
.hero-split .nova-demo__card-name {
  color: var(--c-ink-soft);
  font-size: 0.75rem;
  font-weight: 500;
}
.hero-split .nova-demo__card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-split .nova-demo__card-prompt,
.hero-split .nova-demo__card[aria-selected="true"] .nova-demo__card-prompt {
  position: relative;
  align-self: flex-end;
  display: inline-block;
  background: var(--c-blue);
  color: var(--c-white);
  border-radius: 1.15rem;
  padding: 0.5rem 0.85rem;
  line-height: 1.3;
  font-size: 0.8125rem;
  max-width: 100%;
  word-wrap: break-word;
  margin-top: 0;
  max-height: none;
  opacity: 1;
  overflow: visible;
  transition: none;
}
.hero-split .nova-demo__card-prompt::before {
  content: "";
  position: absolute;
  bottom: -0.1rem;
  right: -0.35rem;
  height: 1rem;
  width: 1rem;
  border-bottom-left-radius: 0.8rem 0.7rem;
  border-right: 1rem solid var(--c-blue);
  transform: translate(0, -0.1rem);
  pointer-events: none;
}
.hero-split .nova-demo__card-prompt::after {
  content: "";
  position: absolute;
  bottom: -0.1rem;
  right: -2.5rem;
  height: 1rem;
  width: 10px;
  background-color: var(--c-white);
  border-bottom-left-radius: 0.5rem;
  transform: translate(-1.875rem, -2px);
  pointer-events: none;
}

/* Desktop carousel — cards in the right column, horizontal scroll-snap.
   No left padding so the first card sits flush against the strip's left
   edge; right padding keeps the last card centerable. Left mask only
   activates once the user has scrolled (JS toggles .is-scrolled-x). */
@media (min-width: 1025px) {
  .hero-split .nova-demo__cards {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    z-index: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    gap: var(--s-4);
    padding-block: var(--s-3);
    padding-left: 0;
    padding-right: max(0px, calc(50% - 90px));
    scrollbar-width: none;
    -ms-overflow-style: none;
    --mask-left: 0%;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 var(--mask-left),
      #000 90%,
      transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0,
      #000 var(--mask-left),
      #000 90%,
      transparent 100%);
  }
  .hero-split .nova-demo__cards.is-scrolled-x { --mask-left: 10%; }
  .hero-split .nova-demo__cards::-webkit-scrollbar { display: none; }
  /* While the user drags, disable snap + smooth so the drag follows the
     cursor 1:1 with no jolt; snap re-engages on release. */
  .hero-split .nova-demo__cards.is-grabbing {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  /* Desktop carousel — sizing + snap. Bubble visuals are defined universally
     outside this media query (so mobile also gets the chat-bubble look). */
  .hero-split .nova-demo__card,
  .hero-split .nova-demo__card:hover,
  .hero-split .nova-demo__card[aria-selected="true"] {
    flex: 0 0 180px;
    scroll-snap-align: center;
    position: relative;
    overflow: visible;
  }
}

/* Mobile: hero cards overflow the column when laid out next to the phone,
   so stack them under the phone and let them scroll horizontally with a
   soft right-edge mask hinting at the swipe. */
@media (max-width: 1024px) {
  .hero-split .nova-demo {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-5);
    min-height: 0;
  }
  .hero-split .nova-demo__cards {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    gap: var(--s-4);
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 8%,
      #000 92%,
      transparent 100%);
            mask-image: linear-gradient(to right,
      transparent 0,
      #000 8%,
      #000 92%,
      transparent 100%);
  }
  .hero-split .nova-demo__cards::-webkit-scrollbar { display: none; }
  .hero-split .nova-demo__card {
    flex: 0 0 220px;
    padding-block: 0;
  }

  /* Hero text column on mobile: center alignment + CTAs full-width. */
  .hero-split__inner { gap: 0; }
  .hero-split .hero-content--left {
    align-items: center;
    text-align: center;
  }
  .hero-split .hero-content__ctas { width: 100%; }
  .hero-split .hero-content__ctas .btn { flex: 1 1 auto; }

  /* Hero phone on mobile: drop the 3D tilt (perspective), keep the scale. */
  .hero-split .iphone--tilt {
    transform: scale(0.8);
  }
  .hero-split .nova-demo__phone-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* Mobile-only hero overrides (phone, ≤768px). */
@media (max-width: 768px) {
  main > section.hero-split.hero-split--home { padding-top: 8rem; }
  .hero-content__tagline br { display: none; }
  .hero-content--left { gap: 32px; }
  .hero-content--left .hero-content__lead { align-items: center; }
  .hero-content--left .hero-content__ctas { max-width: 320px; }
  /* Drop the 4th avatar in social-proof pills on small screens. */
  .hero-content__avatars img:last-child,
  .cta-banner__avatars img:last-child { display: none; }
  /* Compact vertical rhythm on all non-hero/non-story sections. */
  main > section[class]:not(.hero-split):not(.hero):not(.sticky-story) {
    padding-block: 4rem !important;
  }
}

/* ========================================================================
   HeroContent (text block — used inside Hero / HeroSplit)
   ======================================================================== */

.hero-content--center { text-align: center; }
.hero-content--left {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: baseline;
}

.hero-content__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  box-shadow: 0 1px 2px rgba(15, 16, 20, 0.03);
}
.hero-content__eyebrow--social { padding-left: 0.375rem; }
.hero-content__eyebrow--pill { padding-inline: 0.875rem; }

.hero-content__avatars { display: inline-flex; align-items: center; }
.hero-content__avatars img {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 2px solid var(--c-white);
  object-fit: cover;
  background: var(--c-line);
}
.hero-content__avatars img + img { margin-left: -10px; }
.hero-content__eyebrow-text { line-height: 1; color: var(--c-ink); }

.hero-content__kicker {
  display: inline-block;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-blue);
  background: var(--c-blue-soft);
  padding: 0.2em 0.6em;
  border-radius: 8px;
  margin: 0;
}

/* H1 + manifesto wrapper — tight spacing inside, regular column gap outside. */
.hero-content__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.hero-content--center .hero-content__lead { align-items: center; }

.hero-content__title {
  font-family: var(--ff-heading);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-wrap: balance;
  white-space: pre-line;
}
.hero-content--center .hero-content__title {
  margin-top: var(--s-5);
  margin-left: auto;
  margin-right: auto;
  max-width: 22ch;
  font-size: var(--fs-h1);
}
.hero-content--left .hero-content__title {
  max-width: 22ch;
  font-size: clamp(2rem, 3.75vw, 3rem);
}

.hero-content__description {
  line-height: 1.55;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}
.hero-content--center .hero-content__description {
  margin-top: var(--s-5);
  margin-left: auto;
  margin-right: auto;
  max-width: 52ch;
  font-size: var(--fs-lg);
}
.hero-content--left .hero-content__description {
  margin-top: var(--s-4);
  max-width: 52ch;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
}

.hero-content__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: 0;
}
.hero-content--center .hero-content__ctas { justify-content: center; }
.hero-content--left .hero-content__ctas { justify-content: flex-start; }

/* Hero clients row — small logos under the CTAs, native heights per logo,
   horizontal scroll on mobile (body has overflow-x: clip so it stays contained). */
.hero-content__clients {
  margin-top: var(--s-6);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hero-content__clients::-webkit-scrollbar { display: none; }
.hero-content__clients-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 40px;
}
.hero-content--center .hero-content__clients-list { justify-content: center; }
.hero-content__client { flex: 0 0 auto; }
.hero-content__client img {
  display: block;
  width: auto;
  max-width: none;
  opacity: 0.85;
}

@media (max-width: 540px) {
  .hero-content__ctas { flex-direction: column; align-items: stretch; }
}

/* ========================================================================
   iPhone mock
   ======================================================================== */

.iphone {
  --iphone-radius: 48px;
  --iphone-bezel: 14px;
  --iphone-bg: #0F1014;
  width: var(--iphone-w);
  aspect-ratio: 320 / 660;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-fluid);
}
.iphone--tilt {
  transform: perspective(1300px) rotateY(-16deg) rotateX(6deg);
  transform-origin: center center;
}

.iphone__frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--iphone-bg);
  border-radius: var(--iphone-radius);
  padding: var(--iphone-bezel);
}
/* Subtle inner glass ring — premium iPhone 15 feel, inspired by the Tailwind
   "border-zinc-700 border-opacity-40" pattern. */
.iphone__frame::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--iphone-radius) - 4px);
  border: 1.5px solid rgba(120, 124, 138, 0.35);
  pointer-events: none;
  z-index: 1;
}

.iphone__notch { display: none; }

.iphone__btn {
  position: absolute;
  background: #1a1c22;
  border-radius: 2px;
  border-right: 1px solid rgba(255, 255, 255, 0.64);
}
.iphone__btn--mute     { left: -2px; top: 88px;  width: 4px; height: 24px; }
.iphone__btn--vol-up   { left: -2px; top: 132px; width: 4px; height: 48px; }
.iphone__btn--vol-down { left: -2px; top: 192px; width: 4px; height: 48px; }
.iphone__btn--power    { right: -2px; top: 152px; width: 4px; height: 72px; }

.iphone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--c-white);
  border-radius: calc(var(--iphone-radius) - var(--iphone-bezel));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.iphone__statusbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px 6px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--c-ink);
  height: 38px;
}
.iphone__time { letter-spacing: -0.01em; }
.iphone__sysicons { display: inline-flex; align-items: center; gap: 5px; }
.iphone__sysicons svg { display: block; height: 11px; width: auto; }

.iphone__home {
  display: none;
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 4px;
  background: var(--c-ink);
  border-radius: 999px;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .iphone--tilt { transform: none; }
}

/* ========================================================================
   NOVA window (chat UI inside iPhone mock)
   ======================================================================== */

.nova-window {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--ff-body);
  min-height: 0;
}
/* Finger pointer overlay — emerges from below the phone, tilted left,
   and lands on top of the mic in the tabbar when a step declares
   `pointerCue: true`. Fades out after the tap. */
.nova-window__pointer {
  position: absolute;
  width: 68px;
  height: 68px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 110%) rotate(-18deg);
  opacity: 1;
  pointer-events: none;
  z-index: 5;
  transition:
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s linear;
}
.nova-window__pointer.is-active {
  transform: translate(calc(-50% + 28px), 20%) rotate(-12deg);
}
.nova-window__pointer.is-finished {
  transform: translate(-50%, 130%) rotate(-18deg);
}

.nova-window__head {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 12px;
  border-bottom: 1px solid rgba(15, 16, 20, 0.05);
}
.nova-window__back {
  background: transparent;
  border: 0;
  color: var(--c-blue);
  padding: 0;
  display: inline-flex;
  align-items: center;
  cursor: default;
}
.nova-window__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.nova-window__brand img {
  display: block;
  height: 16px;
  width: auto;
}
.nova-window__user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-line);
  justify-self: end;
}
.nova-window__user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nova-window__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 12px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Keep items at their natural size — never squash a room card image
   to fit. Overflow just clips older items at the top of the body. */
.nova-window__body > * { flex-shrink: 0; }
/* Static screen — fills the body edge-to-edge when a nova-demo card
   ships an `image` instead of a chat prompt/replies. Negative margins
   override the body padding so the screenshot reaches the chrome on
   all four sides. */
.nova-window__screen {
  flex: 1;
  width: calc(100% + 24px);
  margin: -12px -12px 0;
  overflow: hidden;
  background: var(--c-bg);
  opacity: 1;
  transition: opacity 0.4s var(--ease-fluid);
}
.nova-window__screen.is-fading-out { opacity: 0; }
/* Floating NOVA speech bubble — blue brand pill with a bot icon and a
   short message. Sits on top of a static screenshot to amorce the
   dual-mode story (step 0 of the home hero). */
.nova-window__image-bubble {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  padding: 11px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-white);
  background: var(--c-blue);
  border-radius: 16px 16px 16px 4px;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.28);
  z-index: 2;
}
.nova-window__image-bubble-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--c-white);
}
.nova-window__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* Force GPU compositing + high-quality interpolation. Defeats the
     pixelated bilinear resampling browsers apply on transformed
     parents (hero-split perspective + rotate). */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}
/* Brief active state on the tabbar mic — used to fake the "user taps
   the mic to start" gesture before the hybrid image→chat transition. */
.nova-tabbar__item--mic.is-tapping {
  transform: scale(0.92);
  transition: transform 0.12s var(--ease-fluid);
}
/* Screen-fill mode — collapse the composer so the image gets the full
   vertical space between the head bar and the tabbar. */
.nova-window--screen-fill .nova-window__composer { display: none; }
/* Dynamic chat (hero) — anchor content to the bottom of the screen so
   the latest replies/cards/chips stay visible even when the conversation
   exceeds the iPhone body height. Older messages clip at the top. */
.nova-window__body:not(.nova-window__body--static) { justify-content: flex-end; }

.nova-window__composer {
  flex-shrink: 0;
  padding: 6px 14px 10px;
}
.nova-window__textarea {
  background: var(--c-bg);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--c-ink-soft);
  min-height: 36px;
  display: flex;
  align-items: center;
}
.nova-window__textarea-placeholder { color: var(--c-ink-soft); }
.nova-window__textarea-placeholder[hidden] { display: none; }
.nova-window__textarea-typing { color: var(--c-ink); }
.nova-window__textarea-typing[hidden] { display: none; }
.nova-window__textarea-typing::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-left: 2px;
  background: var(--c-blue);
  vertical-align: -2px;
  animation: nova-cursor-blink 0.9s steps(2, end) infinite;
}
@keyframes nova-cursor-blink { 50% { opacity: 0; } }

.nova-tabbar {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  padding: 8px 0 18px;
  border-top: 1px solid rgba(15, 16, 20, 0.05);
  color: var(--c-blue);
}
.nova-tabbar__item { display: inline-flex; align-items: center; justify-content: center; }
.nova-tabbar__item--mic {
  position: relative;
  width: 50px;
  height: 50px;
  margin-top: -16px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(36, 167, 218, 1) 0%, rgba(137, 0, 137, 1) 100%);
  color: var(--c-white);
  box-shadow: 0 6px 20px -6px rgba(36, 167, 218, 0.5);
  transform: scale(1.1);
  transition: transform var(--dur-fast) var(--ease-fluid);
}
/* Mic icon (filled body + outlined stand) lifted slightly to leave room
   for the NOVA pill at the bottom of the gradient. */
.nova-tabbar__item--mic .nova-mic__icon {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
}
/* Tiny sparkles in the top-right corner of the gradient. */
.nova-tabbar__item--mic .nova-mic__sparkles {
  position: absolute;
  top: 8px;
  right: 10px;
  opacity: 0.95;
}
/* "NOVA" pill on the bottom inside the circle — overflow:hidden on the
   parent clips its corners cleanly. */
.nova-tabbar__item--mic .nova-mic__label {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--c-white);
  background: none;
  border-radius: 3px;
  opacity: 0.8;
}
.nova-tabbar__item--mic.is-listening { transform: scale(1.06); }
.nova-tabbar__item--mic.is-listening::before,
.nova-tabbar__item--mic.is-listening::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--c-blue);
  pointer-events: none;
}
.nova-tabbar__item--mic.is-listening::before { animation: nova-mic-pulse 1.6s ease-out infinite; }
.nova-tabbar__item--mic.is-listening::after  { animation: nova-mic-pulse 1.6s ease-out 0.5s infinite; }
@keyframes nova-mic-pulse {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* ========================================================================
   NOVA demo (cards on the right of the phone)
   ======================================================================== */

.nova-demo {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 660px;
}
.nova-demo__phone-wrap {
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}
/* Wraps the cards strip and the pills navigation vertically, so the pills
   render BELOW the bubbles rather than next to them inside the flex row. */
.nova-demo__strip {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  flex: 1 1 auto;
}
/* On pages opted into the hero-phone morph (.has-morph: incidents,
   visiteurs), cap the strip so the cards column stays visually tight
   next to the phone, matches the morph trajectory.
   Desktop only — mobile turns the strip into a horizontal scroll row. */
@media (min-width: 1025px) {
  .has-morph .hero-split .nova-demo__strip { max-width: 280px; }
}

.nova-demo__cards {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  width: 360px;
  max-width: 360px;
  z-index: 2;
}

.nova-demo__card {
  --card-shift: 0px;
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 14px;
  align-items: center;
  width: 100%;
  max-width: 360px;
  padding: 16px 22px 18px;
  border: 0;
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transform: translateX(var(--card-shift));
  transition:
    transform 0.45s var(--ease-fluid),
    background-color 0.25s var(--ease-fluid),
    box-shadow 0.25s var(--ease-fluid);
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 6px 24px -10px rgba(15, 16, 20, 0.08);
}
.nova-demo__card:hover { background: rgba(255, 255, 255, 0.72); }
.nova-demo__card[aria-selected="true"] {
  --card-shift: -36px;
  background: var(--c-white);
  box-shadow: 0 18px 50px -16px rgba(15, 16, 20, 0.20);
}
.nova-demo__card:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }

.nova-demo__card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-line);
  border: 2px solid var(--c-white);
  box-shadow: 0 2px 8px rgba(15, 16, 20, 0.10);
}

.nova-demo__card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.nova-demo__card-head {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
/* Inline headshot inside the card head — only shown in the flat hero cards
   (the wider nova-showcase variant already has the big avatar on the left). */
.nova-demo__card-headshot { display: none; }
.hero-split .nova-demo__card-headshot {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.nova-demo__card-name {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--c-ink);
}
.nova-demo__card-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-blue);
  background: rgba(36, 167, 218, 0.10);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  font-weight: 500;
}
.nova-demo__card-prompt {
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  line-height: 1.45;
}

.nova-demo__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(36, 167, 218, 0.10);
}
.nova-demo__progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--c-blue);
}

/* Mini pills navigation under the cards strip. Active pill widens and
   takes the brand blue; idle ones stay as small neutral dots. */
.nova-demo__pills {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-3);
}
.nova-demo__pill {
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 16, 20, 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-fluid),
    width 0.3s var(--ease-fluid);
}
.nova-demo__pill:hover { background: rgba(15, 16, 20, 0.32); }
.nova-demo__pill.is-active {
  background: var(--c-blue);
  width: 24px;
}
.nova-demo__pill.is-active:hover { background: var(--c-blue); }
.nova-demo__pill:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }

@media (max-width: 1024px) {
  .nova-demo {
    flex-direction: column;
    gap: var(--s-6);
    min-height: auto;
    align-items: center;
  }
  .nova-demo__cards {
    position: static;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px max(16px, var(--container-pad)) 16px;
    gap: var(--s-3);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--container-pad));
  }
  .nova-demo__cards::-webkit-scrollbar { display: none; }
  .nova-demo__card {
    flex-shrink: 0;
    width: min(300px, 80vw);
  }
  .nova-demo__card[aria-selected="true"] { --card-shift: 0px; }
}

/* ========================================================================
   NOVA chat dynamic elements (JS-injected DOM)
   ======================================================================== */

.nova-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  animation: nova-msg-in 0.4s var(--ease-fluid) backwards;
}
.nova-msg--user {
  align-self: flex-end;
  background: var(--c-blue);
  color: var(--c-white);
  border-bottom-right-radius: 4px;
}
.nova-msg--bot {
  align-self: flex-start;
  color: var(--c-ink);
  padding: 6px 4px;
  border-radius: 0;
}

.nova-typing-indicator {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: var(--c-bg);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  animation: nova-msg-in 0.3s var(--ease-fluid);
}
.nova-typing-indicator > span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-ink-soft);
  opacity: 0.4;
  animation: nova-typing-bounce 1.2s infinite ease-in-out;
}
.nova-typing-indicator > span:nth-child(2) { animation-delay: 0.16s; }
.nova-typing-indicator > span:nth-child(3) { animation-delay: 0.32s; }

.nova-room {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-white);
  animation: nova-msg-in 0.4s var(--ease-fluid) backwards;
}
.nova-room__media {
  background: var(--c-blue-soft);
  aspect-ratio: 16 / 7;
  overflow: hidden;
}
.nova-room__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Hero context: shorter media so the dense scenario A (long prompt +
   reply + room card + chips) doesn't get clipped at the top of the
   iPhone body. */
.hero-split .nova-room__media { aspect-ratio: 16 / 5; }
.nova-room__body { padding: 10px 12px 12px; }
.nova-room__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink);
}
.nova-room__subtitle {
  font-size: 12px;
  color: var(--c-ink-soft);
  margin-top: 3px;
}
.nova-room__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}
.nova-room__chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-ink-soft);
}

.nova-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.nova-chip {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(36, 167, 218, 0.10);
  color: var(--c-blue);
  font-weight: 500;
  animation: nova-msg-in 0.4s var(--ease-fluid) backwards;
}

/* ----- Photo followup (scenario B) — CTA + camera + thumbnail ----- */
.nova-photo-cta {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--c-ink);
  cursor: default;
  animation: nova-msg-in 0.3s var(--ease-fluid);
  transition: transform 220ms var(--ease-fluid), background 180ms ease;
}
.nova-photo-cta.is-tapping {
  transform: scale(0.92);
  background: var(--c-blue-soft);
}
.nova-photo-camera {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: #0F1014;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  animation: nova-msg-in 0.35s var(--ease-fluid);
}
.nova-photo-thumb {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,0.45), transparent 55%),
    linear-gradient(135deg, #4FB5E0 0%, #1E94C2 60%, #0F4F75 100%);
  border: 2px solid var(--c-white);
  box-shadow: 0 4px 10px rgba(15, 16, 20, 0.20);
  animation: nova-photo-snap 0.4s var(--ease-fluid);
}
.nova-room { position: relative; }

@keyframes nova-photo-snap {
  from { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes nova-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nova-typing-bounce {
  0%, 60%, 100% { opacity: 0.4; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

.nova-listening {
  margin: auto;
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  opacity: 1;
  animation: nova-listening-fade-in 0.35s var(--ease-fluid) backwards;
}
.nova-listening__dots { display: inline-flex; margin-left: 1px; }
.nova-listening__dots > span {
  display: inline-block;
  opacity: 0.25;
  animation: nova-listening-dot 1.4s infinite ease-in-out;
}
.nova-listening__dots > span:nth-child(2) { animation-delay: 0.18s; }
.nova-listening__dots > span:nth-child(3) { animation-delay: 0.36s; }

@keyframes nova-listening-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nova-listening-dot {
  0%, 60%, 100% { opacity: 0.25; }
  30% { opacity: 1; }
}

/* ========================================================================
   Feature cards — destructured grid with white-fade overlay + CTA
   ======================================================================== */

.feature-cards-fade { padding: var(--s-9) 0 var(--s-8); }
.feature-cards-fade__stage {
  position: relative;
  margin-top: var(--s-6);
}
.feature-cards-fade__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
}
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition:
    border-color 1s ease,
    transform var(--dur-base) var(--ease-fluid);
  text-decoration: none;
  color: inherit;
}
.feature-card:hover { border-color: var(--c-blue); }
.feature-card:nth-child(4n+1) { transform: translateY(0); }
.feature-card:nth-child(4n+2) { transform: translateY(28px); }
.feature-card:nth-child(4n+3) { transform: translateY(14px); }
.feature-card:nth-child(4n+4) { transform: translateY(40px); }
.feature-card__title {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.feature-card__body {
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  line-height: 1.45;
}
.feature-card__more {
  margin-top: var(--s-2);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--c-blue);
}
.feature-cards-fade__overlay,
.feature-cards-fade__cta { display: none; }
@media (max-width: 1024px) {
  .feature-cards-fade__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-card:nth-child(2n+1) { transform: translateY(0); }
  .feature-card:nth-child(2n+2) { transform: translateY(20px); }
}
@media (max-width: 540px) {
  .feature-cards-fade__grid {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  .feature-card { transform: none !important; }
}

/* ========================================================================
   NOVA showcase — vertical NOVA demo with integrations row
   ======================================================================== */

.nova-showcase { padding: var(--s-9) 0; background: var(--c-white); }
.nova-showcase__stage {
  display: flex;
  justify-content: center;
  margin-top: var(--s-6);
}
.nova-showcase__integrations {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-7);
}
.nova-showcase__integrations-label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.nova-showcase__integrations-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
}
.nova-showcase__integration {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}

/* ========================================================================
   Logo row — inline integrations callout
   ======================================================================== */

.logo-row { padding: var(--s-7) 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); background: var(--c-white); }
.logo-row .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); justify-content: center; }
.logo-row__label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.logo-row__items { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
.logo-row__name {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.logo-row__img { height: 22px; width: auto; opacity: 0.75; filter: grayscale(100%); }

/* ========================================================================
   Solutions grid — 3 cards
   ======================================================================== */

.solutions-grid { padding: var(--s-9) 0; }
.solutions-grid__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.solution-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: var(--c-white);
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-fluid);
}
.solution-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -28px rgba(15, 16, 20, 0.18); }
/* Image at the top of the card, full-bleed via negative margins. Top corners
   share the card's outer radius so the curve reads as continuous; bottom is
   flat, sitting flush against the text padding below. Same height for all 3
   cards = visual consistency in the grid. */
.solution-card__image {
  display: block;
  width: calc(100% + var(--s-5) * 2);
  /* Override the global `img { max-width: 100% }` that was clamping the
     bleed and leaving a white gap on the right. */
  max-width: none;
  height: 200px;
  margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-5)) var(--s-4);
  object-fit: cover;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.solution-card__kicker {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-blue);
}
.solution-card__title {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.solution-card__description {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  flex: 1;
}
.solution-card__cta {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--c-blue);
  margin-top: var(--s-2);
}
@media (max-width: 1024px) {
  .solutions-grid__items { grid-template-columns: 1fr; }
}

/* ========================================================================
   Solutions showcase — alt layout. 3 cards side-by-side, rounded visual
   on top, no explicit CTA (whole card clickable), thin vertical dividers
   between columns on desktop.
   ======================================================================== */
.solutions-showcase { padding: var(--s-9) 0; }
.solutions-showcase__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--s-7);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-white);
  overflow: hidden;
}
.solutions-showcase__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--c-line);
  transition: background var(--dur-base) var(--ease-fluid);
}
.solutions-showcase__card:last-child { border-right: 0; }
.solutions-showcase__card:hover { background: var(--c-bg); }
.solutions-showcase__card:hover .solutions-showcase__title { color: var(--c-blue); }

.solutions-showcase__visual {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-blue-soft);
  margin-bottom: var(--s-3);
}
.solutions-showcase__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-fluid);
}
.solutions-showcase__card:hover .solutions-showcase__visual img { transform: scale(1.03); }

.solutions-showcase__kicker {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--c-blue);
  text-transform: none;
  letter-spacing: 0;
}
.solutions-showcase__title {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0;
  transition: color var(--dur-base) var(--ease-fluid);
}
.solutions-showcase__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0;
}

@media (max-width: 900px) {
  .solutions-showcase__grid {
    grid-template-columns: 1fr;
  }
  .solutions-showcase__card {
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
  }
  .solutions-showcase__card:last-child { border-bottom: 0; }
}

/* ========================================================================
   Tabbed cases — left tabs + right panel
   ======================================================================== */

.tabbed-cases { padding: var(--s-9) 0; background: var(--c-white); }
.tabbed-cases__board {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 2fr;
  gap: var(--s-7);
  margin-top: var(--s-6);
  align-items: start;
}
.tabbed-cases__tabs { display: flex; flex-direction: column; gap: var(--s-2); }
.tabbed-cases__tab {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-4);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-fluid), border-color var(--dur-fast) var(--ease-fluid);
}
.tabbed-cases__tab:hover { background: var(--c-bg); }
.tabbed-cases__tab[aria-selected="true"] {
  background: var(--c-bg);
  border-color: var(--c-line);
}
.tabbed-cases__tab-kicker {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.tabbed-cases__tab-label {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--c-ink);
  line-height: 1.3;
}
.tabbed-cases__panel { padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-bg); }
.tabbed-cases__panel-title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.tabbed-cases__panel-body {
  margin-top: var(--s-3);
  color: var(--c-ink-soft);
  line-height: 1.55;
}
.tabbed-cases__panel-bullets {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
}
.tabbed-cases__panel-bullets li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  color: var(--c-ink);
}
.tabbed-cases__panel-bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-blue);
}
@media (max-width: 1024px) {
  .tabbed-cases__board { grid-template-columns: 1fr; }
  .tabbed-cases__panel-bullets { grid-template-columns: 1fr; }
}

/* ========================================================================
   Value pillars — 4 description blocks (Écosystème)
   ======================================================================== */

.value-pillars { padding: var(--s-9) 0; }
.value-pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-7);
  margin-top: var(--s-6);
}
@media (min-width: 1025px) {
  .value-pillars__grid {
    max-width: 960px;
    margin: 4rem auto;
  }
}
.value-pillar { display: flex; flex-direction: column; gap: var(--s-1); }
.value-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--c-blue-soft);
  color: var(--c-blue);
  margin-bottom: var(--s-1);
}
.value-pillar__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.value-pillar__body {
  color: var(--c-ink-soft);
  line-height: 1.45;
  font-size: 0.875rem;
}
@media (max-width: 768px) {
  .value-pillars__grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ------------------------------------------------------------------
   Logo marquee — partner / connector logos scrolling horizontally.
   Used inside value-pillars (and reusable as a section type later).
   Mixes real brand SVGs (loaded from Simple Icons CDN with hex 0F1014)
   and text fallbacks for vendors not on Simple Icons.
   ------------------------------------------------------------------ */
.logo-marquee {
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

/* Standalone partner marquee — always white background regardless of
   alternating section logic. Compact vertical rhythm. */
.partner-marquee { padding: var(--s-7) 0; }
main > section.partner-marquee.partner-marquee {
  background: var(--c-white);
  margin-inline: 0;
  border-radius: 0;
}
.partner-marquee .logo-marquee { margin-top: 0; padding-top: 0; }
/* Inside value-pillars (under "Un écosystème fédérateur"), tighten the
   gap above the marquee — the pillars row already gives breathing room.
   Constrained to 960px centered. */
.value-pillars .logo-marquee {
  max-width: 960px;
  margin: 0 auto;
  padding-top: 0;
}
.logo-marquee__label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.logo-marquee__viewport {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.logo-marquee__viewport.is-dragging { cursor: grabbing; }
.logo-marquee__viewport img { pointer-events: none; }
.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  width: max-content;
  /* JS takes over and disables this animation. Keeps as a fallback if
     JS fails or is disabled. */
  animation: logo-marquee-scroll 38s linear infinite;
  will-change: transform;
}
.logo-marquee__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  flex-shrink: 0;
}
.logo-marquee__img {
  height: 32px;
  width: auto;
  opacity: 0.85;
  filter: grayscale(100%);
  transition: opacity 0.25s var(--ease-fluid);
}
.logo-marquee__item:hover .logo-marquee__img { opacity: 1; }
.logo-marquee__name {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--c-ink-soft);
  opacity: 0.85;
  white-space: nowrap;
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* ========================================================================
   Timeline steps — Process with numbered steps
   ======================================================================== */

.timeline-steps { padding: var(--s-9) 0; background: var(--c-white); }
.timeline-steps__list {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  position: relative;
}
.timeline-steps__list::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(to right, var(--c-line) 0%, var(--c-blue) 50%, var(--c-line) 100%);
  z-index: 0;
}
.timeline-step { position: relative; display: flex; flex-direction: column; gap: var(--s-2); z-index: 1; }
.timeline-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-blue);
  color: var(--c-blue);
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: var(--s-3);
}
.timeline-step__title {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--c-ink);
}
.timeline-step__text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
  white-space: pre-line;
}
.timeline-step__duration {
  display: inline-block;
  margin-top: var(--s-2);
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: rgba(36, 167, 218, 0.10);
  color: var(--c-blue);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.75rem;
}
@media (max-width: 1024px) {
  .timeline-steps__list { grid-template-columns: 1fr; gap: var(--s-6); }
  .timeline-steps__list::before { display: none; }
}

/* ========================================================================
   Logo wall — static partner logos
   ======================================================================== */

.logo-wall { padding: var(--s-8) 0; }
.logo-wall__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-7);
  margin-top: var(--s-5);
}
.logo-wall__name {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--c-ink-soft);
  opacity: 0.75;
  letter-spacing: -0.01em;
}
.logo-wall__img { height: 36px; width: auto; opacity: 0.7; filter: grayscale(100%); }

/* ========================================================================
   Commitments grid — 4 trust cards
   ======================================================================== */

.commitments-grid { padding: var(--s-9) 0; background: var(--c-white); }
.commitments-grid__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s-6);
  /* No gap — items touch and a 1px right border on each (except last)
     provides the visual separation. */
  gap: 0;
  max-width: 960px;
  margin-inline: auto;
}
.commitment {
  padding: var(--s-4) var(--s-5);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--c-line);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-2);
}
.commitment:last-child { border-right: 0; }
.commitment__icon {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  background: transparent;
  color: #242424;
  margin-bottom: var(--s-1);
}
.commitment__icon svg { width: 52px; height: 52px; display: block; }
.commitment__icon--image {
  align-self: center;
  background: transparent;
  border-radius: 0;
  width: auto;
  height: 52px;
}
.commitment__icon--image img {
  height: 52px;
  width: auto;
  display: block;
}
.commitment__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.commitment__body {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--c-ink-soft);
}
@media (max-width: 1024px) {
  .commitments-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two-column: items in left col get a right border, items in right col
     get a bottom border (except last row). Items in last row drop the
     bottom border. */
  .commitment { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .commitment:nth-child(odd)  { border-right: 1px solid var(--c-line); }
  .commitment:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 540px) {
  .commitments-grid__items { grid-template-columns: 1fr; }
  /* Single column: only border-bottom between items (none on last). */
  .commitment { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .commitment:last-child { border-bottom: 0; }
}

/* ========================================================================
   FAQ accordion (uses native <details>/<summary>)
   ======================================================================== */

.faq { padding: var(--s-9) 0; }
.faq__list { margin-top: var(--s-6); display: flex; flex-direction: column; gap: 0; }
.faq__item {
  border-top: 1px solid var(--c-line);
  padding: var(--s-4) 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--c-line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q-text { flex: 1; }
.faq__q-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-blue);
  font-weight: 700;
  font-size: 1.125rem;
  transition: transform var(--dur-fast) var(--ease-fluid);
}
.faq__item[open] .faq__q-icon { transform: rotate(45deg); }
.faq__a {
  margin-top: var(--s-3);
  color: var(--c-ink-soft);
  line-height: 1.6;
  font-size: 0.9375rem;
}

/* ========================================================================
   CTA banner — bottom-of-page wide CTA
   ======================================================================== */

.cta-banner { padding: var(--s-7) 0 var(--s-8); }
.cta-banner__inner {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--s-7) var(--s-6);
  /* Brand blue — matches the primary CTA button colour for visual unity. */
  background: var(--c-blue);
  border: 0;
  border-radius: var(--r-lg);
  color: var(--c-white);
}
/* Decorative quarter-circle arcs in opposite corners — desktop only.
   Each pseudo is a full circle, half off-canvas so only the inner quarter
   is visible. Stroke is white at 0.1 opacity, 8px thick, transparent fill. */
@media (min-width: 1024px) {
  .cta-banner__inner::before,
  .cta-banner__inner::after {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border: 8px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
  }
  .cta-banner__inner::before  { top: -160px;    left: -160px; }
  .cta-banner__inner::after   { bottom: -160px; right: -160px; }
}
.cta-banner__title {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: clamp(1.625rem, 3.3vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--c-white);
  text-wrap: balance;
  margin-inline: auto;
  max-width: 22ch;
  white-space: pre-line;
}
.cta-banner__description {
  margin: var(--s-4) auto 0;
  max-width: 52ch;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.80);
}
/* Eyebrow inside the inverted CTA — flip to a translucent white pill. */
.cta-banner__inner .section-head__eyebrow {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.16);
}
/* Primary CTA stays solid blue, but on the dark band we lift it to white
   so it pops against the deep navy. */
.cta-banner__inner .btn--primary {
  background: var(--c-white);
  color: var(--c-ink);
}
.cta-banner__inner .btn--primary:hover { background: rgba(255, 255, 255, 0.92); }
/* Secondary CTA → ghost button on dark bg. */
.cta-banner__inner .btn--secondary {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
}
.cta-banner__inner .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
}
.cta-banner__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

/* Social-proof pill on the inverted CTA — mirrors the hero pill but flipped
   to translucent-white on the brand-blue band. */
.cta-banner__social-proof {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-2) 0.875rem var(--s-2) 0.375rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--r-full);
  color: var(--c-white);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1;
}
.cta-banner__avatars { display: inline-flex; align-items: center; }
.cta-banner__avatars img {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 2px solid var(--c-blue);
  object-fit: cover;
  background: var(--c-line);
}
.cta-banner__avatars img + img { margin-left: -10px; }
.cta-banner__social-proof-text { color: var(--c-white); }

/* ========================================================================
   Teasers list — items empilés verticalement, icône à gauche, border-bottom
   sauf sur le dernier. Fond transparent.
   ======================================================================== */

.teasers-list { padding: var(--s-9) 0; }
.teasers-list__items {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
}
.teaser {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-5);
  align-items: flex-start;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-line);
}
.teaser:last-child { border-bottom: 0; }

.teaser__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(36, 167, 218, 0.10);
  color: var(--c-blue);
  font-size: 1.125rem;
  flex-shrink: 0;
}
.teaser__body { display: flex; flex-direction: column; gap: var(--s-2); }
.teaser__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.3;
}
.teaser__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.teaser__cta {
  margin-top: var(--s-1);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--c-blue);
  align-self: flex-start;
}
@media (max-width: 540px) {
  .teaser { grid-template-columns: 36px 1fr; gap: var(--s-4); }
  .teaser__icon { width: 36px; height: 36px; font-size: 1rem; }
}

/* ========================================================================
   ROI grid — 4 rows: lever / title / body
   ======================================================================== */

.roi-grid { padding: var(--s-9) 0; background: var(--c-white); }
.roi-grid__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.roi-row {
  padding: var(--s-5);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.roi-row__lever {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: var(--s-2);
}
.roi-row__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.roi-row__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
@media (max-width: 768px) {
  .roi-grid__items { grid-template-columns: 1fr; }
}

/* ========================================================================
   Feature flow / parcours — 2-col layout (sticky header + vertical timeline)
   ======================================================================== */

.feature-flow { padding: var(--s-9) 0; background: var(--c-white); }

.feature-flow__layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.45fr);
  gap: var(--s-9);
  align-items: start;
}

.feature-flow__header {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  align-self: start;
  display: flex;
  flex-direction: column;
}
.feature-flow__header .section-head__eyebrow {
  align-self: flex-start;
  margin-bottom: var(--s-3);
}
.feature-flow__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-wrap: balance;
  max-width: 16ch;
}
.feature-flow__description {
  margin: var(--s-4) 0 0;
  max-width: 38ch;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-ink-soft);
}

@media (max-width: 1024px) {
  .feature-flow__layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .feature-flow__header { position: static; }
}

.feature-flow__timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Vertical rail line — runs from first node center to last node center */
.feature-flow__timeline::before {
  content: '';
  position: absolute;
  left: 27px; /* 56px node / 2 - 1px line offset */
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(to bottom,
    var(--c-line) 0%,
    var(--c-line) 20%,
    rgba(36, 167, 218, 0.30) 50%,
    var(--c-line) 80%,
    var(--c-line) 100%);
  z-index: 0;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-5);
  padding: 0 0 var(--s-7) 0;
  z-index: 1;
  /* Initial state for fade-in animation */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s var(--ease-fluid) var(--step-delay, 0ms),
    transform 0.6s var(--ease-fluid) var(--step-delay, 0ms);
}
.flow-step:last-child { padding-bottom: 0; }
.flow-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.flow-step__rail {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4px; /* visually align node with kicker baseline */
}
.flow-step__node {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition:
    transform 0.35s var(--ease-fluid),
    border-color 0.35s var(--ease-fluid),
    box-shadow 0.35s var(--ease-fluid);
}
.flow-step.is-visible .flow-step__node {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 4px rgba(36, 167, 218, 0.10);
}
.flow-step:hover .flow-step__node {
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(36, 167, 218, 0.14), 0 8px 22px -10px rgba(36, 167, 218, 0.45);
}
.flow-step__num {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-blue);
  letter-spacing: -0.01em;
}
.flow-step__icon-glyph {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--c-blue);
}
.flow-step__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow-step__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
}
.flow-step__kicker {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.flow-step__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.25;
}
.flow-step__caption {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .flow-step { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 540px) {
  .flow-step { grid-template-columns: 48px 1fr; gap: var(--s-4); }
  .flow-step__node { width: 48px; height: 48px; }
  .feature-flow__timeline::before { left: 23px; }
}

/* ========================================================================
   Visual mocks — UI snippets shown next to each timeline step
   ======================================================================== */

.flow-step__mock {
  margin-top: var(--s-4);
  /* light perspective tilt — tones down on hover for emphasis */
  transform: perspective(1500px) rotateY(-7deg) rotateX(2deg);
  transform-origin: 30% center;
  transition: transform 0.5s var(--ease-fluid), box-shadow 0.5s var(--ease-fluid);
  max-width: 380px;
}
.flow-step:hover .flow-step__mock {
  transform: perspective(1500px) rotateY(-3deg) rotateX(1deg) translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
  .flow-step__mock { transform: none; }
  .flow-step:hover .flow-step__mock { transform: none; }
}

/* Shared mock skeleton */
.mock {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -22px rgba(15, 16, 20, 0.18), 0 6px 16px -10px rgba(15, 16, 20, 0.10);
  overflow: hidden;
}

/* --- placeholder --- */
.mock--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: var(--s-5);
  background: linear-gradient(135deg, rgba(36, 167, 218, 0.06), rgba(36, 167, 218, 0.01));
  border: 1px dashed rgba(36, 167, 218, 0.30);
}
.mock-placeholder__label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-blue);
  opacity: 0.75;
  text-align: center;
}

/* --- image --- */
.mock--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- chat-bubble --- */
.mock--chat { padding: var(--s-4); }
.mock-chat__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-family: var(--ff-body);
  font-size: 0.75rem;
  color: var(--c-ink-soft);
}
.mock-chat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-blue);
  flex-shrink: 0;
}
.mock-chat__dot--live {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}
.mock-chat__brand {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  flex: 1;
}
.mock-chat__time { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.mock-chat__bubble {
  background: var(--c-blue);
  color: var(--c-white);
  border-radius: 16px 16px 16px 4px;
  padding: 12px 14px;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.mock-chat__text { margin: 0; }
.mock-chat__hint {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--ff-body);
  font-size: 0.75rem;
  color: var(--c-ink-soft);
  text-align: right;
}

/* --- room-card --- */
.mock--room { display: flex; flex-direction: column; }
.mock-room__media {
  position: relative;
  background: var(--c-blue-soft);
  aspect-ratio: 16 / 7;
}
.mock-room__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--c-white);
  color: var(--c-blue);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(15, 16, 20, 0.08);
}
.mock-room__body { padding: var(--s-3) var(--s-4) var(--s-4); }
.mock-room__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.mock-room__subtitle {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}
.mock-room__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--s-2);
}
.mock-room__chip {
  font-size: 0.6875rem;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--c-bg);
  color: var(--c-ink-soft);
}

/* --- action-buttons --- */
.mock--actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--c-bg);
  border-color: rgba(15, 16, 20, 0.06);
}
.mock-action {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 11px 14px;
  border-radius: var(--r-full);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.875rem;
  border: 1px solid transparent;
}
.mock-action--primary {
  background: var(--c-blue);
  color: var(--c-white);
  box-shadow: 0 6px 18px -8px rgba(36, 167, 218, 0.55);
}
.mock-action--secondary {
  background: var(--c-white);
  color: var(--c-ink);
  border-color: var(--c-line);
}
.mock-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.875rem;
  line-height: 1;
}

/* --- m365-invite --- */
.mock-m365__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, #f8fbff, #ffffff);
}
.mock-m365__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.75rem;
  color: var(--c-ink-soft);
}
.mock-m365__brand-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #0078d4;
  color: var(--c-white);
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: -0.02em;
}
.mock-m365__status {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  color: #16a34a;
}
.mock-m365__body { padding: var(--s-4); }
.mock-m365__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.mock-m365__when {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
  font-variant-numeric: tabular-nums;
}
.mock-m365__room {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--s-2);
  font-size: 0.8125rem;
  color: var(--c-ink);
}
.mock-m365__room-pin { font-size: 0.875rem; }
.mock-m365__attendees {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}
.mock-m365__att {
  font-size: 0.6875rem;
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: var(--c-bg);
  color: var(--c-ink-soft);
}

/* ========================================================================
   Dual perspective — chaque side = bloc pleine largeur "contenu + visuel"
   alterné gauche/droite. Fond transparent.
   ======================================================================== */

.dual-perspective { padding: var(--s-9) 0; }
.dual-perspective__rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
  margin-top: var(--s-7);
}

.dual-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-9);
  align-items: center;
}
/* Even rows: image on the left, content on the right (alternating) */
.dual-row:nth-child(even) .dual-row__copy   { order: 2; }
.dual-row:nth-child(even) .dual-row__visual { order: 1; }

.dual-row__copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.dual-row__kicker {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.dual-row__title {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--c-ink);
  text-wrap: balance;
  max-width: 18ch;
}
.dual-row__body {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 42ch;
}
.dual-row__bullets {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.dual-row__bullets li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink);
}
.dual-row__bullets li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--c-blue);
  font-weight: 700;
}

.dual-row__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dual-row__visual > .mock {
  max-width: 380px;
  width: 100%;
  transform: perspective(1500px) rotateY(-6deg) rotateX(2deg);
  transform-origin: 30% center;
  transition: transform 0.5s var(--ease-fluid);
}
.dual-row:hover .dual-row__visual > .mock {
  transform: perspective(1500px) rotateY(-2deg) rotateX(1deg) translateY(-4px);
}
/* Mirrored tilt on alternating rows */
.dual-row:nth-child(even) .dual-row__visual > .mock {
  transform: perspective(1500px) rotateY(6deg) rotateX(2deg);
  transform-origin: 70% center;
}
.dual-row:nth-child(even):hover .dual-row__visual > .mock {
  transform: perspective(1500px) rotateY(2deg) rotateX(1deg) translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .dual-row__visual > .mock,
  .dual-row:hover .dual-row__visual > .mock,
  .dual-row:nth-child(even) .dual-row__visual > .mock,
  .dual-row:nth-child(even):hover .dual-row__visual > .mock { transform: none; }
}

@media (max-width: 1024px) {
  .dual-row { grid-template-columns: 1fr; gap: var(--s-5); }
  /* Mobile: visual always above the copy, no alternation */
  .dual-row:nth-child(even) .dual-row__copy   { order: 2; }
  .dual-row:nth-child(even) .dual-row__visual { order: 1; }
  .dual-row:nth-child(odd)  .dual-row__copy   { order: 2; }
  .dual-row:nth-child(odd)  .dual-row__visual { order: 1; }
}

/* ========================================================================
   Stats strip — big numbers in a row
   ======================================================================== */

.stats-strip { padding: var(--s-9) 0; }
.stats-strip--light { background: var(--c-bg); }
.stats-strip--dark { background: var(--c-ink); color: var(--c-white); }
.stats-strip--dark .section-head__title { color: var(--c-white); }
.stats-strip--dark .section-head__eyebrow { color: rgba(36, 167, 218, 0.95); }
.stats-strip--brand { background: var(--c-blue); color: var(--c-white); }
.stats-strip--brand .section-head__title,
.stats-strip--brand .section-head__eyebrow,
.stats-strip--brand .section-head__description { color: var(--c-white); }
.stats-strip--brand .section-head__eyebrow { opacity: 0.85; }

.stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  position: relative;
}
.stat:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20%; bottom: 20%;
  right: calc(-1 * var(--s-5) / 2);
  width: 1px;
  background: var(--c-line);
  opacity: 0.6;
}
.stats-strip--dark .stat:not(:last-child)::after,
.stats-strip--brand .stat:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.20);
}
.stat__value {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: clamp(2.25rem, 3vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-blue);
}
.stats-strip--dark .stat__value,
.stats-strip--brand .stat__value { color: var(--c-white); }
.stat__label {
  font-family: var(--ff-body);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--c-ink-soft);
  max-width: 22ch;
}
.stats-strip--dark .stat__label,
.stats-strip--brand .stat__label { color: rgba(255, 255, 255, 0.80); }
.stat__trend {
  display: inline-block;
  margin-top: var(--s-1);
  padding: 3px 8px;
  border-radius: var(--r-full);
  background: rgba(36, 167, 218, 0.12);
  color: var(--c-blue);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  width: max-content;
}
.stats-strip--dark .stat__trend,
.stats-strip--brand .stat__trend {
  background: rgba(255, 255, 255, 0.16);
  color: var(--c-white);
}
@media (max-width: 1024px) {
  .stats-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
  .stat:nth-child(2n)::after { display: none; }
}
@media (max-width: 540px) {
  .stats-strip__grid { grid-template-columns: 1fr; }
  .stat {
    align-items: center;
    text-align: center;
    padding-bottom: var(--s-6);
  }
  .stat__label { max-width: none; }
  /* Re-purpose the divider as a horizontal line under each stat (except last). */
  .stat:not(:last-child)::after {
    display: block !important;
    top: auto;
    bottom: 0;
    left: 15%;
    right: 15%;
    width: auto;
    height: 1px;
  }
  .stat:last-child::after { display: none !important; }
}

/* ========================================================================
   Quote block — large pull-quote with author
   ======================================================================== */

.quote-block { padding: var(--s-9) 0; }
.quote-block--light { background: var(--c-bg); }
.quote-block--dark  { background: var(--c-ink); color: var(--c-white); }
.quote-block--brand {
  background: var(--c-blue-soft);
}

.quote-block__quote {
  position: relative;
  margin: 0;
  padding-left: var(--s-7);
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  text-wrap: balance;
}
.quote-block--dark .quote-block__quote { color: var(--c-white); }
.quote-block__mark {
  position: absolute;
  left: 0;
  top: -0.2em;
  font-size: 4em;
  line-height: 1;
  color: var(--c-blue);
  opacity: 0.45;
  font-family: serif;
}

.quote-block__author {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-6) 0 0 var(--s-7);
}
.quote-block__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-white);
  box-shadow: 0 2px 8px rgba(15, 16, 20, 0.10);
  flex-shrink: 0;
}
.quote-block__author-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.quote-block__author-name {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.quote-block--dark .quote-block__author-name { color: var(--c-white); }
.quote-block__author-role {
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}
.quote-block--dark .quote-block__author-role { color: rgba(255, 255, 255, 0.70); }
.quote-block__logo {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--c-ink-soft);
  opacity: 0.7;
  letter-spacing: -0.01em;
}
.quote-block--dark .quote-block__logo { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 540px) {
  .quote-block__quote { padding-left: 0; padding-top: var(--s-7); }
  .quote-block__mark { left: 0; top: 0; font-size: 3em; }
  .quote-block__author { margin-left: 0; }
}

/* ========================================================================
   Spotlight media — text + visual mock, asymmetric
   ======================================================================== */

.spotlight-media { padding: var(--s-9) 0; }
.spotlight-media__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-9);
  align-items: center;
}
.spotlight-media--right .spotlight-media__copy   { order: 1; }
.spotlight-media--right .spotlight-media__visual { order: 2; }
.spotlight-media--left  .spotlight-media__copy   { order: 2; }
.spotlight-media--left  .spotlight-media__visual { order: 1; }

.spotlight-media__title {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-wrap: balance;
  margin-top: var(--s-3);
  max-width: 18ch;
}
.spotlight-media__body {
  margin-top: var(--s-4);
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 48ch;
}
.spotlight-media__bullets {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.spotlight-media__bullets li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  color: var(--c-ink);
}
.spotlight-media__bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-blue);
}
.spotlight-media__ctas {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.spotlight-media__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.spotlight-media__visual > .mock {
  max-width: 460px;
  width: 100%;
  transform: perspective(1500px) rotateY(-6deg) rotateX(2deg);
  transform-origin: 30% center;
  transition: transform 0.5s var(--ease-fluid);
}
.spotlight-media__visual > .mock--image {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(15, 23, 42, 0.35);
}
.spotlight-media__visual > .mock--image img {
  aspect-ratio: 4 / 5;
  height: auto;
  width: 100%;
  object-fit: cover;
}
.spotlight-media:hover .spotlight-media__visual > .mock {
  transform: perspective(1500px) rotateY(-2deg) rotateX(1deg) translateY(-4px);
}
.spotlight-media--left .spotlight-media__visual > .mock {
  transform: perspective(1500px) rotateY(6deg) rotateX(2deg);
  transform-origin: 70% center;
}
.spotlight-media--left:hover .spotlight-media__visual > .mock {
  transform: perspective(1500px) rotateY(2deg) rotateX(1deg) translateY(-4px);
}
@media (max-width: 1024px) {
  .spotlight-media__layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .spotlight-media--right .spotlight-media__visual,
  .spotlight-media--left .spotlight-media__visual { order: 2; }
  .spotlight-media--right .spotlight-media__copy,
  .spotlight-media--left .spotlight-media__copy { order: 1; }
}

/* ========================================================================
   Sticky scroll story — left acts scroll, right stage sticks and swaps
   ======================================================================== */

/* Section padding-top reduced because .sticky-story__eyebrow already has
   a 4em padding-top — otherwise the two would stack and feel oversized. */
.sticky-story { padding: var(--s-7) 0 0; background: var(--c-white); }
.sticky-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  margin-top: var(--s-7);
}

.sticky-story__acts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* When no closing block follows, keep the sticky right column pinned
     past the last act. The closing block carries its own bottom padding
     when present. */
  padding-bottom: 40vh;
  /* Single source of truth for vertical gap — re-used by the connector line
     so it spans exactly through the gap, regardless of the value chosen. */
  --acts-gap: 80px;
  gap: var(--acts-gap);
  /* Host the continuous vertical timeline. */
  position: relative;
}
/* Continuous vertical timeline that spans from the first act to the last.
   Sits behind the time pills (z-index: 0 vs pill z-index: 1, pill has
   white background) so each pill appears to "sit on" the line. Goes all
   the way to the bottom of the last act, ensuring the line reaches each
   centered pill regardless of how long the last title is. */
.sticky-story__acts::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 0;
  /* End at the last act's bottom — discount padding-bottom (40vh) that
     reserves sticky room but isn't actually part of the timeline. */
  bottom: 40vh;
  width: 2px;
  background: var(--c-line);
  z-index: 0;
  pointer-events: none;
}
/* When a closing block follows, the acts list has no bottom padding,
   so the timeline runs all the way to the last act. */
.sticky-story__acts:has(+ .sticky-story__closing)::before {
  bottom: 0;
}
.sticky-act {
  position: relative;
  padding: 0;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: var(--s-5);
  row-gap: var(--s-3);
  align-items: start;
  opacity: 0.35;
  transition: opacity 0.5s var(--ease-fluid);
}

/* Closing block — sits in the same column as the acts, below the last
   one. Not a step: no time marker, no left rail. Spans full width so
   it reads like a section conclusion rather than an extra step. */
.sticky-story__acts:has(+ .sticky-story__closing) { padding-bottom: 0; }
.sticky-story__closing {
  display: block;
  margin-top: var(--s-9);
  padding-bottom: 30vh;
}
.sticky-story__closing-eyebrow {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-blue);
  margin: 0 0 var(--s-2);
}
.sticky-story__closing-title {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
}
.sticky-story--compact .sticky-story__closing-title {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}
.sticky-story__closing-body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0 0 var(--s-3);
}
.sticky-story__closing-body:last-child { margin-bottom: 0; }
/* Bare variant — no eyebrow / no title, just the body in a single
   framed pill (same vibe as the /demo closing paragraph). The
   container is the frame; paragraphs inside get no individual chrome.
   Drop the 44px gutter grid because we no longer need the act marker
   column. */
.sticky-story__closing--bare {
  display: block;
  margin-bottom: 4rem;
  padding: var(--s-5) var(--s-6);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-blue-soft);
  border-left: 3px solid var(--c-blue);
  border-radius: 0 14px 14px 0;
}
.sticky-story__closing--bare .sticky-story__closing-body {
  margin: 0;
}
.sticky-story__closing--bare .sticky-story__closing-body + .sticky-story__closing-body {
  margin-top: var(--s-3);
}
.sticky-story__closing--bare .sticky-story__closing-body strong {
  font-weight: 700;
}
.sticky-act.is-active { opacity: 1; }

/* Per-act connector retired in favour of a single continuous line on
   the parent `.sticky-story__acts::before` — that line spans all acts
   without needing per-element handling of gaps and centered pills. */

.sticky-act__num {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2px solid var(--c-line);
  color: var(--c-ink-soft);
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0;
  margin: 0;
  position: relative;
  z-index: 1;
  transition: background var(--dur-base) var(--ease-fluid),
              border-color var(--dur-base) var(--ease-fluid),
              color var(--dur-base) var(--ease-fluid);
}
.sticky-act.is-active .sticky-act__num {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-white);
}

/* Optional `time:` field on an act (V5 home — "Une journée avec NOVA"). When
   present, the timestamp replaces the act number in the rail. JetBrains Mono
   gives the timestamps a deliberate "digital" feel against the editorial copy. */
.sticky-act__time {
  /* Absolute positioning over col 1, centered both axes on the timeline
     anchor (line center at x=22px) and the act's vertical middle.
     Canonical center pattern: position the element's TOP-LEFT at the
     anchor point, then translate -50% on both axes to center its box. */
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--c-white);
  border: 1.5px solid var(--c-line);
  color: var(--c-ink-soft);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  z-index: 1;
  transition: background var(--dur-base) var(--ease-fluid),
              border-color var(--dur-base) var(--ease-fluid),
              color var(--dur-base) var(--ease-fluid);
}
/* Home only — pill returns to normal grid flow (auto-placed in col 1
   row 1, next to the label) since bodies are hidden and absolute
   centering leaves an awkward gap. Small left shift to recenter on
   the vertical timeline despite the pill being wider than col 1. */
.page-home .sticky-act__time {
  position: relative;
  top: auto;
  left: auto;
  transform: translate(-24%, 0);
}
.sticky-act.is-active .sticky-act__time {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-white);
}

.sticky-act__title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--ff-heading);
  /* Bumped from 1.5/2.6vw/2 → 1.875/3.2vw/2.5 to give the act titles more weight. */
  font-weight: 600;
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  text-wrap: balance;
  max-width: 18ch;
}
.sticky-act__body {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 42ch;
}
/* Home — story acts are reduced to time + label + title only. */
.page-home .sticky-act__body { display: none; }
/* Optional logo-pill row under the body of an act — used to drop a short
   name-drop of partners / integrations on the relevant step. */
.sticky-act__pills {
  grid-column: 2;
  grid-row: 3;
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.sticky-act__pill {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--c-ink);
  padding: 4px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-white);
}

.sticky-story__stage {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
  align-self: start;
  height: calc(100vh - var(--header-h) - var(--s-7));
  padding: var(--s-5);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Slight global trim on the in-story phone & browser so they sit in a touch
   more whitespace inside the stage. Browser is trimmed harder and gets extra
   padding around it. */
/* Sticky-story phone — modern 9:19.5 (440 × 956) ratio override, same
   displayed width as before. */
.sticky-story .iphone {
  aspect-ratio: 440 / 956;
  transform: scale(0.88);
  transform-origin: center center;
}
.sticky-story .iphone--tilt {
  transform: perspective(1300px) rotateY(-16deg) rotateX(6deg) scale(0.88);
}
.sticky-story .browser-mock--tilt {
  transform: perspective(1400px) rotateY(-8deg) rotateX(3deg) scale(0.95);
}
.sticky-story--stage-left .browser-mock--tilt {
  transform: perspective(1400px) rotateY(8deg) rotateX(3deg) scale(0.95);
}
.sticky-story--shell-browser .sticky-story__stage {
  padding: 0;
}
/* The right column is now an iPhone (or browser) shell; the swapping visuals
   live inside the inner screen, stacked absolutely. */
.sticky-story__phone-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* When the shell is a browser, the parent is the (non-flex) .browser-mock__content
   with a fixed aspect-ratio — fill it absolutely so visuals stack correctly. */
.sticky-story--shell-browser .sticky-story__phone-screen {
  position: absolute;
  inset: 0;
  flex: none;
}
.sticky-story__visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.5s var(--ease-fluid), transform 0.5s var(--ease-fluid);
  pointer-events: none;
}
.sticky-story__visual.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Inside the iPhone, drop the 3D tilt on the mock — the phone shell already
   carries the perspective. Mock fills the available screen width. */
.sticky-story__visual > .mock {
  max-width: 100%;
  width: 100%;
  transform: none;
}
/* nova-chat fills the whole iPhone screen — no extra padding around it. */
.sticky-story__visual:has(> .nova-window) { padding: 0; }
.sticky-story__visual > .nova-window {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
/* Static body — allow vertical scroll if pre-rendered content exceeds the
   visible iPhone screen height. */
.nova-window__body--static {
  overflow-y: auto;
  scrollbar-width: thin;
  padding-bottom: 14px;
}

/* ----- shadcn-flavored static card + badges (used by nova-chat) ----- */
.nova-card {
  position: relative;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 16, 20, 0.04);
}
/* Status pill — top-right of the card, shadcn-flavored green with a
   pulsing dot. Sits above the media + body. */
.nova-card__status {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 7px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  color: #15803d;
  background: #f0fdf4;
  border: 0;
  border-radius: 999px;
}
.nova-card__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: nova-status-pulse 1.8s ease-out infinite;
}
@keyframes nova-status-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);    }
}
/* Blue variant — e.g. "Pris en charge". Keeps the pulsing dot pattern. */
.nova-card__status--blue {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}
.nova-card__status--blue .nova-card__status-dot {
  background: #3b82f6;
  box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);
  animation-name: nova-status-pulse-blue;
}
@keyframes nova-status-pulse-blue {
  0%   { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0);    }
}
/* Yellow / amber variant — used for "À venir", "En attente", "Notée".
   The dot pulses in amber by default; an explicit statusIcon: check
   swaps the dot for a check glyph (e.g. completed actions). */
.nova-card__status--yellow {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}
.nova-card__status--yellow .nova-card__status-dot {
  background: #d97706;
  box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55);
  animation-name: nova-status-pulse-yellow;
}
@keyframes nova-status-pulse-yellow {
  0%   { box-shadow: 0 0 0 0   rgba(217, 119, 6, 0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(217, 119, 6, 0);    }
}
.nova-card__status--yellow .nova-card__status-check {
  display: block;
  color: #d97706;
}
.nova-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--c-bg);
}
.nova-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nova-card__body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nova-card__kicker {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.nova-card__title {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.3;
}
.nova-card__subtitle {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-ink-soft);
}
.nova-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.nova-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--c-bg);
  color: var(--c-ink-soft);
  border: 0;
}
/* Action buttons inside a card (e.g. Voir / Télécharger on a doc card). */
.nova-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.nova-card__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 11.5px;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  line-height: 1;
}
.nova-card__action svg { display: block; }

/* Star rating row inside a nova-card. Filled stars in the brand-hover
   blue + N/5 label aligned next to them. */
.nova-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--c-blue-hover);
  margin-top: 2px;
}
.nova-card__rating-star { color: rgba(15, 23, 42, 0.18); }
.nova-card__rating-star.is-filled { color: var(--c-blue-hover); }
.nova-card__rating-value {
  margin-left: 6px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--c-blue-hover);
}

/* ========================================================================
   Event page mock — content card displayed inside the iphone-mock for the
   /fonctionnalites/communication-locale page (occupant side of spotlight-
   media). No NOVA chat here, just a SaaSOffice "Actualités" detail screen.
   ======================================================================== */
.event-page .event-page__head-spacer { width: 22px; }
.event-page__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-white);
}
.event-page__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-bg);
}
.event-page__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-page__status {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #b45309;
  background: rgba(255, 251, 235, 0.95);
  border: 1px solid #fde68a;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.event-page__content {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-page__kicker {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.event-page__title {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.25;
  margin: 0;
}
.event-page__meta {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-page__meta li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ff-body);
  font-size: 12px;
  color: var(--c-ink-light, #475569);
}
.event-page__meta svg { color: var(--c-blue); flex-shrink: 0; }
.event-page__excerpt {
  margin: 6px 0 0;
  font-family: var(--ff-body);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--c-ink);
}
.event-page__cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--c-white);
  background: var(--c-blue);
  border: 0;
  border-radius: 8px;
  cursor: default;
}
.event-page__suggestions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
.event-page__suggestions-title {
  display: block;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-ink-light, #475569);
  margin-bottom: 8px;
}
.event-page__suggestions ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-page__suggestions li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--c-bg);
  border-radius: 8px;
}
.event-page__suggestion-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--c-ink);
}
.event-page__suggestion-when {
  font-family: var(--ff-body);
  font-size: 11px;
  color: var(--c-ink-light, #475569);
}

/* spotlight-media now also supports an iphone-event mock — give it the
   same skewed perspective treatment as the regular .mock images. */
.spotlight-media__visual > .iphone {
  transform: perspective(1500px) rotateY(-6deg) rotateX(2deg);
  transform-origin: 30% center;
  transition: transform 0.5s var(--ease-fluid);
}
.spotlight-media:hover .spotlight-media__visual > .iphone {
  transform: perspective(1500px) rotateY(-2deg) rotateX(1deg) translateY(-4px);
}
.spotlight-media--left .spotlight-media__visual > .iphone {
  transform: perspective(1500px) rotateY(6deg) rotateX(2deg);
  transform-origin: 70% center;
}
.spotlight-media--left:hover .spotlight-media__visual > .iphone {
  transform: perspective(1500px) rotateY(2deg) rotateX(1deg) translateY(-4px);
}

/* Static nova-chat polish — kill the bubble animation and tighten the
   user/bot bubble styles to match the shadcn vibe. */
.nova-window--static .nova-msg,
.nova-window--static .nova-room,
.nova-window--static .nova-chip,
.nova-window--static .nova-card { animation: none; }
.nova-window--static .nova-msg {
  font-size: 15px;
  line-height: 1.4;
  padding: 9px 12px;
  border-radius: 12px;
}
.nova-window--static .nova-msg--user { border-bottom-right-radius: 4px; }
.nova-window--static .nova-msg--bot {
  padding: 4px 2px;
  color: var(--c-ink);
  border-radius: 0;
  background: transparent;
}
.nova-window--static .nova-chips { gap: 4px; margin-top: 4px; }
.nova-window--static .nova-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(36, 167, 218, 0.08);
  color: var(--c-blue);
  border: 1px solid rgba(36, 167, 218, 0.18);
}
/* When the visual is a real image (screenshot), let it cover the whole
   screen of the phone/browser edge-to-edge — no inner padding around it. */
.sticky-story__visual:has(> .mock--image) {
  padding: 0;
}
.sticky-story__visual > .mock--image {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.sticky-story__visual > .mock--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 0;
}
/* Mobile: hide the stage entirely. Images / screens take too much viewport
   space on small screens. Acts read as a plain vertical scroll. */
@media (max-width: 1024px) {
  .sticky-story__grid {
    display: block;
    margin-top: var(--s-6);
  }
  .sticky-story__acts {
    padding-bottom: 0;
    --acts-gap: var(--s-5);
  }
  .sticky-act {
    min-height: auto;
    padding: var(--s-5) 0;
    opacity: 1;
  }
  .sticky-story__stage { display: none; }
}

/* ========================================================================
   Sticky-story variants — stage on the left + browser shell
   ======================================================================== */

/* Stage on the left (used by the FF1 "vue gestionnaire" flow) — swap the
   visual order of the two grid items without touching the DOM. The grid
   column ratios are mirrored too so the stage always gets the wider slot. */
.sticky-story--stage-left .sticky-story__acts-col { order: 2; }
.sticky-story--stage-left .sticky-story__stage    { order: 1; }
.sticky-story--stage-left .sticky-story__grid {
  grid-template-columns: 1.15fr 0.85fr;
}


/* ========================================================================
   Sticky-story — compact typography + narrower content column
   (Reversible: drop the .sticky-story--compact class to roll back.)
   ======================================================================== */
.sticky-story--compact .sticky-act__title {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  max-width: none;
}
.sticky-story--compact .sticky-act__body {
  font-size: var(--fs-md);
  max-width: none;
}
.sticky-story--compact .sticky-story__grid {
  grid-template-columns: 0.85fr 1.15fr;
}
.sticky-story--compact.sticky-story--stage-left .sticky-story__grid {
  grid-template-columns: 1.15fr 0.85fr;
}

/* ========================================================================
   Sticky-story — inline header (eyebrow / title / desc above the acts list
   inside the left/content column instead of centered above the grid).
   Lifts the phone/browser higher in the viewport.
   (Reversible: drop the .sticky-story--header-inline class to roll back.)
   ======================================================================== */
.sticky-story__header {
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--c-line);
}
.sticky-story__header .section-head__title {
  font-size: clamp(2.125rem, 3.6vw, 2.75rem);
}

/* Sentinel placed just above the eyebrow by app.js — fully invisible,
   used only by the IntersectionObserver that toggles .is-stuck. */
.sticky-story__eyebrow-sentinel {
  height: 1px;
  pointer-events: none;
}

/* Sticky eyebrow: stays pinned at the top of the acts column while the
   user scrolls through the story. Sits in normal flow (so the title/desc
   that follow it scroll past underneath), with a soft fade below to soften
   the transition. Released naturally when the acts column ends. */
.sticky-story__eyebrow {
  position: sticky;
  top: var(--header-h);
  z-index: 4;
  align-self: flex-start;
  width: 100%;
  /* Box size stays fully constant across base / stuck — no layout shift,
     no scroll jolt. The visual "grow" effect lives on a child span via
     transform: scale(), which doesn't affect layout flow. */
  padding-top: 4em;
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  background: var(--story-bg);
  transition: letter-spacing 0.3s var(--ease-fluid);
}
.sticky-story__eyebrow-text {
  display: inline-block;
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease-fluid);
}
.sticky-story__eyebrow.is-stuck { letter-spacing: 0.06em; }
.sticky-story__eyebrow.is-stuck .sticky-story__eyebrow-text {
  transform: scale(1.15);
}
/* The fade hint sits just below the pill — invisible until something
   actually scrolls underneath it. */
.sticky-story__eyebrow::after {
  content: '';
  position: absolute;
  left: -8px;
  right: -8px;
  top: 100%;
  height: 40px;
  background: linear-gradient(to bottom, var(--story-bg), transparent);
  pointer-events: none;
}

/* The mask fade picks the right colour per alternating section. */
.sticky-story                                  { --story-bg: var(--c-white); }
main > section.sticky-story:nth-of-type(even)  { --story-bg: #f4f6ff; }

/* ========================================================================
   Browser mock — desktop counterpart to iphone-mock
   ======================================================================== */
.browser-mock {
  /* Outer width — shrinks below --browser-w when the column is narrower. */
  width: min(var(--browser-w, 640px), 100%);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-fluid);
}
.browser-mock--tilt {
  transform: perspective(1400px) rotateY(-8deg) rotateX(3deg);
  transform-origin: center center;
}
.browser-mock__frame {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(15, 16, 20, 0.03) inset,
    0 30px 60px -22px rgba(15, 16, 20, 0.22),
    0 14px 32px -16px rgba(15, 16, 20, 0.16);
}
.browser-mock__chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #f7f8fa 0%, #eef0f3 100%);
  border-bottom: 1px solid rgba(15, 16, 20, 0.06);
}
.browser-mock__dots { display: inline-flex; gap: 6px; }
.browser-mock__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.browser-mock__dot--red    { background: #ff5f57; }
.browser-mock__dot--yellow { background: #febc2e; }
.browser-mock__dot--green  { background: #28c840; }
.browser-mock__url {
  font-family: var(--ff-body);
  font-size: 12px;
  color: var(--c-ink-soft);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 4px 14px;
  text-align: center;
  max-width: 280px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-mock__spacer { width: 44px; /* mirrors the dots column for centering */ }
.browser-mock__content {
  position: relative;
  width: 100%;
  aspect-ratio: var(--browser-ratio, 1.6);
  background: var(--c-white);
  overflow: hidden;
  border-radius: 0;
}
/* When the browser content holds a sticky-story image, square the
   frame's bottom corners so the image lands flush. */
.sticky-story--shell-browser .browser-mock__frame {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  .browser-mock--tilt,
  .sticky-story--stage-left .browser-mock--tilt { transform: none; }
}

/* ========================================================================
   Comparison table — NOVA vs another solution.
   Three-column grid: feature label / NOVA (highlighted) / other.
   The highlighted column is drawn by a single grid-overlay element that
   spans every row in column 2, giving it pill-style rounded corners.
   ======================================================================== */

.comparison-split { padding: var(--s-9) 0; }

/* Force white bg + edge-to-edge regardless of alternating section logic.
   Double class bumps specificity over `main > section:nth-of-type(...)`. */
main > section.comparison-split.comparison-split {
  background: var(--c-white);
  margin-inline: 0;
  border-radius: 0;
}

/* Scroll wrapper — on narrow viewports the table overflows horizontally
   instead of collapsing, preserving the side-by-side comparison shape. */
.cmp-scroll {
  margin-top: var(--s-7);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Bleed slightly past the container on touch so the scroll feels natural. */
  margin-inline: calc(var(--s-3) * -1);
  padding-inline: var(--s-3);
}

.cmp-table {
  position: relative;
  display: grid;
  /* Equal 1fr / 1fr / 1fr so the middle "Sans NOVA" column lands at
     the exact horizontal center of the page, in line with the CTA
     that spans below. */
  grid-template-columns: 1fr 1fr 1fr;
  align-items: stretch;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
  min-width: 720px;
  column-gap: 0;
}
/* CTA row — hide the empty side cells and span the button cell across
   the full table width so the button sits perfectly centered under the
   table. */
.cmp-cell--cta-feat,
.cmp-cell--cta-other { display: none; }
.cmp-cell--cta-nova {
  grid-column: 1 / -1;
  justify-content: center;
}

/* Row hover — JS pairs cells sharing the same data-cmp-row by toggling
   .is-row-hover on all three when the mouse enters any of them. */
.cmp-cell.is-row-hover { background-color: rgba(0, 0, 0, 0.01); }

/* Baseline cell — flex column, centered horizontally. */
.cmp-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--s-4) var(--s-4);
  gap: var(--s-1);
}

/* ---- Header row ---- */
.cmp-cell--head {
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
}
.cmp-head__name {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.cmp-head__tagline {
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
  line-height: 1.4;
  margin-top: 2px;
}
.cmp-cell--head-other .cmp-head__name { color: var(--c-ink-soft); }

/* ---- Feature label cell (col 1) ---- */
.cmp-cell--feat {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: var(--s-3);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-left: 0;
}
.cmp-feat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #374151;
  flex-shrink: 0;
}
.cmp-feat__icon svg { width: 100%; height: 100%; display: block; }
.cmp-feat__label {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--c-ink);
  line-height: 1.3;
}
.cmp-feat__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ECECE9;
  color: var(--c-ink-soft);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ---- Value cells (col 2 + 3) ---- */
.cmp-cell--val {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.cmp-val__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cmp-val__icon--ok { color: #16A34A; }
.cmp-val__icon--no { color: #DC2626; }
.cmp-val__text {
  margin-top: var(--s-1);
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
  line-height: 1.4;
}

/* Variant `noIcons` — hide the green check / red cross signals, kept only
   the text. Used on internal pages where the editorial brief explicitly
   bans the "sales comparator" anti-pattern (incidents, visiteurs). */
.comparison-split--no-icons .cmp-val__icon { display: none; }
.comparison-split--no-icons .cmp-val__text { margin-top: 0; }
.comparison-split--no-icons .cmp-cell--val-other .cmp-val__text { color: #b85a52; }
.comparison-split--no-icons .cmp-cell--val-nova .cmp-val__text { color: var(--c-ink); }

/* ---- CTA row ---- */
.cmp-cell--cta {
  padding-top: var(--s-5);
  padding-bottom: var(--s-6);
}
.cmp-cta-btn {
  /* Width sized to content (was 100% - s-3 when the button was scoped
     to the nova column; now the cell spans the full table so the
     button picks its own width). */
  justify-content: center;
}

/* Mobile — collapse to a single column. Each feature becomes a small
   stacked block; the "other" column is appended after the NOVA value. */
@media (max-width: 768px) {
  /* Keep the 3-col table shape; .cmp-scroll handles horizontal overflow.
     Slightly tighter padding so more of the table is visible at once. */
  .cmp-cell { padding: var(--s-3) var(--s-3); }
  .cmp-val__text { font-size: 0.75rem; }
  .cmp-feat__label { font-size: 0.875rem; }
}

/* ========================================================================
   Bento asymmetric — mixed-size cells
   ======================================================================== */

.bento { padding: var(--s-9) 0; }
.bento__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: var(--s-4);
  grid-auto-flow: dense;
  margin-top: var(--s-6);
}
.bento-cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  justify-content: space-between;
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-fluid), transform var(--dur-base) var(--ease-fluid);
}
.bento-cell[href]:hover {
  border-color: rgba(36, 167, 218, 0.45);
  transform: translateY(-2px);
}
.bento-cell--small { grid-column: span 1; grid-row: span 1; }
.bento-cell--wide  { grid-column: span 2; grid-row: span 1; background: var(--c-blue-soft); }
.bento-cell--tall  { grid-column: span 1; grid-row: span 2; }
.bento-cell--large { grid-column: span 2; grid-row: span 2; background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.bento-cell--large .bento-cell__title { color: var(--c-white); }
.bento-cell--large .bento-cell__body  { color: rgba(255, 255, 255, 0.78); }
.bento-cell--large .bento-cell__cta   { color: var(--c-white); }
.bento-cell__kicker {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-blue);
}
.bento-cell__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  line-height: 1.25;
}
.bento-cell--large .bento-cell__title { font-size: 1.5rem; }
.bento-cell__body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.bento-cell__cta {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--c-blue);
  margin-top: auto;
}
@media (max-width: 1024px) {
  .bento__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-cell--large { grid-column: span 2; grid-row: span 1; }
  .bento-cell--wide  { grid-column: span 2; }
  .bento-cell--tall  { grid-row: span 1; }
}
@media (max-width: 540px) {
  .bento__grid { grid-template-columns: 1fr; }
  .bento-cell--small,
  .bento-cell--wide,
  .bento-cell--tall,
  .bento-cell--large { grid-column: span 1; grid-row: span 1; }
}

/* ========================================================================
   Feature spotlight row — compact 4-6 column row
   ======================================================================== */

.spotlight-row { padding: var(--s-8) 0; }
.spotlight-row__items {
  display: grid;
  gap: var(--s-5);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--s-6);
}
.spotlight-row--cols-4 .spotlight-row__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spotlight-row--cols-5 .spotlight-row__items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 6 items render on 2 rows of 3 columns, keeps the cards readable. */
.spotlight-row--cols-6 .spotlight-row__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .spotlight-row--cols-4 .spotlight-row__items,
  .spotlight-row--cols-5 .spotlight-row__items,
  .spotlight-row--cols-6 .spotlight-row__items { grid-template-columns: 1fr; }
}

.spot-item { display: flex; flex-direction: column; gap: var(--s-2); }
.spot-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: rgba(36, 167, 218, 0.10);
  color: var(--c-blue);
  font-size: 1.125rem;
  margin-bottom: var(--s-1);
}
.spot-item__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.spot-item__body {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--c-ink-soft);
}
@media (max-width: 1024px) {
  .spotlight-row__items { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 540px) {
  .spotlight-row__items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ========================================================================
   Integration deep — logo + narrative per integration
   ======================================================================== */

.integration-deep { padding: var(--s-9) 0; background: var(--c-bg); }
.integration-deep__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.integration-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-fluid), transform var(--dur-base) var(--ease-fluid);
}
.integration-card[href]:hover { border-color: rgba(36, 167, 218, 0.45); transform: translateY(-2px); }
.integration-card__logo {
  display: inline-block;
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  padding: 4px 10px;
  background: var(--c-bg);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-2);
  align-self: flex-start;
}
.integration-card__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.integration-card__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
@media (max-width: 1024px) {
  .integration-deep__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .integration-deep__grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   Pricing tiers — 3 plans side by side
   ======================================================================== */

.pricing-tiers { padding: var(--s-9) 0; }
.pricing-tiers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-5) var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.tier--featured {
  border-color: var(--c-blue);
  box-shadow: 0 18px 44px -22px rgba(36, 167, 218, 0.40);
  transform: scale(1.03);
  z-index: 1;
}
.tier__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-blue);
  color: var(--c-white);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.tier__name {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.tier__description {
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  line-height: 1.45;
}
.tier__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.tier__price-amount {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  line-height: 1;
}
.tier__price-period {
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}
.tier__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}
.tier__features li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--c-ink);
}
.tier__features li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--c-blue);
  font-weight: 700;
}
.tier__cta { margin-top: var(--s-5); width: 100%; }
@media (max-width: 1024px) {
  .pricing-tiers__grid { grid-template-columns: 1fr; }
  .tier--featured { transform: none; }
}

/* ========================================================================
   Alternating section backgrounds (auto, every other section)
   Wins over per-section bg rules thanks to higher specificity.
   ======================================================================== */
main > section:nth-of-type(odd)  { background: var(--c-white); }
main > section:nth-of-type(even) {
  /* Slightly lighter than CSS `aliceblue` (#F0F8FF), subtle blue tint. */
  background: #f4f6ff;
  margin-inline: 24px;
  border-radius: 24px;
}

/* Mobile / tablet: drop the 24px alice-blue "card" gutter and rounding,
   edge-to-edge reads better on narrow viewports. */
@media (max-width: 1024px) {
  main > section:nth-of-type(even) {
    margin-inline: 0;
    border-radius: 0;
  }
}

/* Fluid vertical section padding — caps the marketing-page breathing room
   on small viewports where the s-9 (96px) feels gigantic. Hero-split and
   sticky-story keep their own padding-top logic (header offset / sticky
   pin) but inherit the fluid bottom (sticky-story top is reduced too). */
main > section[class]:not(.hero-split):not(.hero):not(.sticky-story) {
  padding-block: clamp(var(--s-6), 4vw + 0.5rem, var(--s-9));
}
.hero-split {
  padding-bottom: clamp(var(--s-6), 4vw + 0.5rem, var(--s-9));
}
.sticky-story {
  padding-top: clamp(var(--s-5), 3vw + 0.25rem, var(--s-7));
}

/* Hero background — plain white. Specificity mirrors the alternating-bg
   rule so it wins by source order. */
main > section.hero-split,
main > section.hero {
  background: var(--c-white);
  background-image: none;
}

/* ========================================================================
   Value-pillars — name-drop integrations row
   ======================================================================== */
.value-pillars__integrations {
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.value-pillars__integrations-label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ink-soft);
}
.value-pillars__integrations-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-3);
}
.value-pillars__integrations-item {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--c-ink);
  padding: 6px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-white);
}

/* ========================================================================
   Posts teaser — blog cards at the bottom of the home
   ======================================================================== */
.posts-teaser { padding: var(--s-9) 0; display: none; }
.posts-teaser__grid {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-white);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-fluid),
              box-shadow var(--dur-base) var(--ease-fluid);
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -22px rgba(15, 16, 20, 0.18);
}
.post-card__category {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-blue);
}
.post-card__title {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  text-wrap: balance;
}
.post-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.post-card__meta {
  margin-top: auto;
  display: flex;
  gap: var(--s-3);
  font-size: 0.8125rem;
  color: var(--c-ink-soft);
}
.posts-teaser__cta {
  margin-top: var(--s-7);
  display: flex;
  justify-content: center;
}
@media (max-width: 1024px) {
  .posts-teaser__grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   Footer
   ======================================================================== */
.footer {
  background: var(--c-ink);
  color: rgba(255, 255, 255, 0.78);
  padding: var(--s-9) 0 var(--s-5);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: var(--s-7);
  align-items: start;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 28ch;
}
.footer__logo {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--c-white);
  text-decoration: none;
}
.footer__tagline {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}
.footer__cta {
  align-self: flex-start;
  margin-top: var(--s-2);
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.footer__col-title {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--s-3);
}
.footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.footer__col-list a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-fluid);
}
.footer__col-list a:hover { color: var(--c-white); }
.footer__col-all { color: var(--c-blue) !important; font-weight: 500; }

.footer__bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.footer__legal a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-fluid);
}
.footer__legal a:hover { color: var(--c-white); }

@media (max-width: 1024px) {
  .footer__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ========================================================================
   Page incidents — hero-phone morph (V3, real translation, desktop only)
   The hero phone is taken out of normal flow (position: fixed) and JS
   interpolates its center between two anchors as the user scrolls:
     anchor A = its in-flow position in the hero (placeholder reserves
                the slot so the layout doesn't collapse)
     anchor B = the sticky-story stage center
   The tilt unwinds, scale matches the sticky-story iPhone (0.88), and
   the screen content cross-fades from the live NOVA demo to a clone of
   the sticky-story nova-chat per active act. The sticky-story phone is
   visually hidden so we only ever see one phone on screen.
   ======================================================================== */
/* Sticky-story phone visually hidden on desktop only (the morphing hero
   phone takes its place). Mobile shows the natural sticky-story phone. */
@media (min-width: 1025px) {
  .has-morph .sticky-story__stage .iphone { visibility: hidden; }
}

/* Base morph-acts styles — always positioned absolutely (overlay) and
   hidden by default. The desktop media query below animates opacity via
   --morph-content. On mobile, opacity stays 0 so the cloned visuals
   don't pollute the hero phone layout. */
.has-morph .morph-acts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.has-morph .morph-acts__visual {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1025px) {
  .has-morph .hero-split .nova-demo__phone-wrap {
    position: fixed;
    z-index: 10;
    will-change: top, left, transform;
  }

  .has-morph .hero-split .iphone--tilt {
    --morph-progress: 0;
    --morph-scale-from: 0.74;
    --morph-scale-to:   0.88;
    transform:
      perspective(1300px)
      rotateY(calc(-16deg * (1 - var(--morph-progress))))
      rotateX(calc(6deg * (1 - var(--morph-progress))))
      scale(calc(
        var(--morph-scale-from) +
        (var(--morph-scale-to) - var(--morph-scale-from)) * var(--morph-progress)
      ));
    transition: none;
  }

  /* Content swap inside the iPhone screen. Hero NOVA demo (dynamic
     nova-window) fades out at ~50% of the morph; the cloned sticky-story
     visuals fade in. The :not() guard prevents the rule from hitting the
     cloned static nova-windows nested under .morph-acts. */
  .has-morph .hero-split .nova-window:not(.nova-window--static) {
    opacity: calc(1 - var(--morph-content, 0));
    transition: opacity 0.2s linear;
  }
  .has-morph .morph-acts {
    opacity: var(--morph-content, 0);
    transition: opacity 0.2s linear;
  }
  .has-morph .morph-acts__visual {
    transform: translateY(8px);
    transition: opacity 0.4s var(--ease-fluid), transform 0.4s var(--ease-fluid);
  }
  .has-morph .morph-acts__visual.is-active {
    opacity: 1;
    transform: translateY(0);
  }
  /* Only the direct img child gets stretched to cover (legacy `kind:image`
     visuals). Imgs nested inside a cloned nova-window header (brand logo,
     user avatar) keep their natural sizes from .nova-window__brand /
     .nova-window__user-avatar rules. */
  .has-morph .morph-acts__visual > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* When the morph clones a full nova-window (static chat) — let it
     fill the iPhone screen edge-to-edge. */
  .has-morph .morph-acts__visual > .nova-window {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  /* Once the phone has reached the sticky-story stage, fade out the
     hero scenario cards — they're hero-only context. */
  .has-morph .hero-split .nova-demo__cards {
    opacity: calc(1 - var(--morph-progress, 0));
    transition: opacity 0.2s linear;
  }
  .has-morph .hero-split .nova-demo__cards[data-morph-faded="true"] {
    pointer-events: none;
  }
}
@media (max-width: 640px) {
  .footer__nav { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ========================================================================
   V5 — Home refondue
   Utilities + hero double-stage + feature NOVA mentions + differentiation
   + sticky-act label + stats sublabel/footnote + scroll hint.
   ======================================================================== */

/* Visually-hidden util — keeps the element in the a11y tree (screen readers,
   crawlers, SEO H1) but removes it from visual flow. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  overflow: hidden;
}

/* ---------- Hero double-stage typography (V5) ---------- */

/* Manifesto = dominant visual headline. Sits between the SEO H1 (hidden)
   and the narrative H2. Massive, lighter weight for a more editorial feel. */
.hero-content__manifesto {
  font-family: var(--ff-heading);
  font-weight: 600;
  /* Mobile bumped from 2.25rem → 2.625rem so the manifesto stays the visual
     anchor of the hero on small screens. */
  font-size: clamp(2.625rem, 5.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  text-wrap: balance;
  margin: 0;
}
/* Smaller hero + sticky-story title on internal pages (feature / solution).
   They read as second-tier vs the home flagship. */
body:not(.page-home) .hero-content__manifesto {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.15;
}
body:not(.page-home) .sticky-story .section-head__title {
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  letter-spacing: -0.01em;
}

/* Highlighter accent on a single word inside the manifesto — same Figtree
   as the rest, solid brand-blue background with white text, mid-radius. */
.hero-content__manifesto-accent {
  display: inline-block;
  font-family: inherit;
  font-style: normal;
  background: var(--c-blue-soft);
  color: var(--c-blue);
  font-weight: 700;
  padding: 0 0.18em;
  border-radius: 8px;
}

/* Tagline = narrative H2 below the manifesto. Big body voice, ends with
   a bold signature ("Tout est à portée de voix !"). */
.hero-content__tagline {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  line-height: 1.5;
  color: var(--c-ink-soft);
  text-wrap: pretty;
  margin: 0;
  max-width: 60ch;
}
.hero-content--center .hero-content__tagline { margin-inline: auto; }
.hero-content__tagline-signature {
  font-family: var(--ff-heading);
  font-weight: 700;
  color: var(--c-ink);
}

/* ---------- Hero scroll hint ---------- */

/* Lottie scroll-down hint — rendered inside hero-content, below the CTAs,
   aligned left. Hidden on mobile (too crowded on small viewports). */
.hero-split { position: relative; }
.hero-content__scroll-hint {
  display: inline-block;
  width: 20px;
  max-width: 20px;
  opacity: 0.5;
  pointer-events: none;
  align-self: flex-start;
}
.hero-content__scroll-hint lottie-player {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 1024px) {
  .hero-content__scroll-hint { display: none; }
}

/* ---------- Feature-cards-fade — NOVA mentions ---------- */

.feature-card { position: relative; }
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: var(--c-blue-soft);
  border-radius: var(--r-md);
  color: var(--c-blue);
  margin-bottom: var(--s-2);
  position: relative;
  z-index: 1;
}
.feature-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* "Augmenté par NOVA" — pill badge pinned to the top-right of the card. */
.feature-card__nova-mention {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: lab(98.1563% -5.60117 2.75915);
  color: #4caf50;
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0;
  border-radius: 999px;
}

/* Background watermark on cards where NOVA is a sidekick (filigrane). */
.feature-card--watermark { overflow: hidden; }
.feature-card__watermark {
  position: absolute;
  right: -8%;
  bottom: -22%;
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: clamp(5rem, 9vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(36, 167, 218, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Keep the readable content above the watermark. */
.feature-card--watermark > :not(.feature-card__watermark) {
  position: relative;
  z-index: 1;
}

/* ---------- Differentiation three-col (Copilot/Gemini section) ---------- */

.differentiation { padding: var(--s-9) 0; }
.differentiation--soft { background: #F4F7FB; }
.differentiation--dark {
  background: #0F1117;
  color: rgba(255, 255, 255, 0.85);
}
.differentiation--dark .section-head__title,
.differentiation--dark .differentiation__col-title { color: var(--c-white); }
.differentiation--dark .section-head__description,
.differentiation--dark .differentiation__col-body { color: rgba(255, 255, 255, 0.72); }

.differentiation__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.differentiation__col {
  padding: var(--s-6) var(--s-5);
  background: var(--c-white);
  border: 0;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.differentiation--dark .differentiation__col {
  background: rgba(255, 255, 255, 0.04);
}
/* Middle column (NOVA) gets a soft halo to anchor the eye — no border. */
.differentiation__col--2 {
  box-shadow: 0 18px 44px -22px rgba(36, 167, 218, 0.30);
}
.differentiation__col-label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ink-soft);
}
.differentiation__col-title {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--c-ink);
}
.differentiation__col-body {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-ink-soft);
}

.differentiation__baseline {
  margin: var(--s-7) auto 0;
  padding: var(--s-5) var(--s-6);
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 0;
  max-width: 64ch;
  text-align: center;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-ink);
}
.differentiation--dark .differentiation__baseline {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
}

.differentiation__cta {
  margin-top: var(--s-5);
  display: flex;
  justify-content: center;
}
.differentiation__cta-link {
  color: var(--c-blue);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
}
.differentiation__cta-link:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .differentiation__grid { grid-template-columns: 1fr; }
}

/* ---------- Stats strip — sublabel + footnote ---------- */

.stat__sublabel {
  display: block;
  margin-top: var(--s-1);
  font-size: 0.75rem;
  color: var(--c-ink-soft);
  opacity: 0.85;
}
.stats-strip__footnote {
  margin: var(--s-7) auto 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--c-ink-soft);
  opacity: 0.7;
}

/* ---------- Sticky-act label (per-act eyebrow above the title) ---------- */
/* Re-enabled to match the V5 PDF spec — each act carries its own eyebrow
   ("NOVA AGIT SUR VOTRE PROPRE AGENDA", "UNE PHRASE, UN CRÉNEAU COMMUN…").
   Positioned in row 1 of the act, above the title (which then moves to row 2). */
.sticky-act__label {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-blue);
  margin-bottom: var(--s-2);
}
.sticky-act:has(> .sticky-act__label) .sticky-act__title {
  grid-row: 2;
  align-self: start;
}
.sticky-act:has(> .sticky-act__label) .sticky-act__body {
  grid-row: 3;
}
.sticky-act:has(> .sticky-act__label) .sticky-act__pills {
  grid-row: 4;
}

/* Minimalist iPhone override removed — the full iPhone skin (bezel, side
   buttons, home indicator, inner glass ring, multi-layer shadow) now applies
   everywhere by default (see .iphone__frame around L1457). This unifies the
   hero-split, sticky-story and nova-showcase phones with the home hero. */

/* ========================================================================
   Tweaks panel — floating dev toggle (bottom-right). Sets a cookie per
   `data-tweak-key` and reloads the page so PHP picks up the new value.
   ======================================================================== */
.tweaks-panel {
  position: fixed;
  bottom: var(--s-4);
  right: var(--s-4);
  z-index: 200;
  font-family: var(--ff-body);
}
.tweaks-panel__toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-white);
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 28px -14px rgba(15, 16, 20, 0.25);
  transition: transform var(--dur-fast) var(--ease-fluid);
}
.tweaks-panel__toggle:hover { transform: translateY(-1px); }
.tweaks-panel__toggle[aria-expanded="true"] { transform: rotate(45deg); }
.tweaks-panel__body {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: 0 22px 50px -22px rgba(15, 16, 20, 0.25);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.tweaks-panel__head {
  font-size: 0.6875rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.tweaks-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tweaks-row__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-ink-soft);
}
.tweaks-row__choices {
  display: inline-flex;
  background: var(--c-bg);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.tweaks-row__choice {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--c-ink-soft);
  font-size: 0.8125rem;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-fluid), color var(--dur-fast) var(--ease-fluid);
}
.tweaks-row__choice:hover { color: var(--c-ink); }
.tweaks-row__choice.is-active {
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: 0 2px 6px rgba(15, 16, 20, 0.08);
}


/* ========================================================================
   Signature block — short narrative section used for the V5 "Mon NOVA /
   Comme d'habitude" pattern. Centered narrow container, eyebrow, big H2
   with optional <em> emphasis, body paragraph.
   ======================================================================== */

.signature-block {
  padding: var(--s-9) 0;
  background: var(--c-bg);
  text-align: center;
}
.signature-block--soft   { background: var(--c-blue-soft); }
.signature-block--plain  { background: var(--c-white); }

.signature__eyebrow {
  display: inline-block;
  margin-bottom: var(--s-4);
}

.signature__title {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--c-ink);
  text-wrap: balance;
  max-width: 22ch;
  margin: 0 auto;
  white-space: pre-line;
}
.signature__body {
  margin: var(--s-5) auto 0;
  max-width: 60ch;
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-ink-soft);
  text-wrap: pretty;
  white-space: pre-line;
}
.signature__em {
  font-style: italic;
  /* Brand-anchor: render `*comme d'habitude*` with a discrete blue underline. */
  color: var(--c-ink);
  background: linear-gradient(transparent 70%, var(--c-blue-soft) 70%);
  padding: 0 0.1em;
}

/* ========================================================================
   Feature portrait — two-column block with a tall left-side image and
   text on the right. Used for the security chapter on /fonctionnalites/
   acces. Supports a floating white "badge" card (e.g. ISO 27001 logo)
   overlaid on the image.
   ======================================================================== */
.feature-portrait {
  padding: var(--s-9) 0;
}
.feature-portrait__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-9);
  align-items: stretch;
}
.feature-portrait--left .feature-portrait__visual { order: 2; }
.feature-portrait--left .feature-portrait__copy   { order: 1; }
.feature-portrait__visual {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--c-bg);
  aspect-ratio: 5 / 4;
}
.feature-portrait__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Floating badge — sits in the bottom-left of the image. */
.feature-portrait__badge {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  background: var(--c-white);
  border-radius: 14px;
  box-shadow: 0 12px 28px -14px rgba(15, 23, 42, 0.35);
}
.feature-portrait__badge-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--c-bg);
}
.feature-portrait__badge-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}
.feature-portrait__badge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.feature-portrait__badge-label {
  font-family: var(--ff-heading);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.feature-portrait__badge-sublabel {
  font-family: var(--ff-body);
  font-size: 0.75rem;
  color: var(--c-ink-light, #475569);
}
.feature-portrait__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-4);
}
.feature-portrait__title {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0;
}
.feature-portrait__body {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0;
}
.feature-portrait__ctas {
  margin-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
@media (max-width: 1024px) {
  .feature-portrait { padding: var(--s-7) 0; }
  .feature-portrait__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
  .feature-portrait--left .feature-portrait__visual,
  .feature-portrait--right .feature-portrait__visual { order: 1; }
  .feature-portrait--left .feature-portrait__copy,
  .feature-portrait--right .feature-portrait__copy { order: 2; }
  .feature-portrait__visual {
    aspect-ratio: 16 / 10;
  }
}

/* ========================================================================
   Team grid — /a-propos founders. Circular portraits, name, role.
   ======================================================================== */
.team-grid { padding: var(--s-9) 0; }
.team-grid__list {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}
.team-member__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg);
  margin-bottom: var(--s-2);
  box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.32);
}
.team-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-member__name {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.team-member__role {
  font-family: var(--ff-body);
  font-size: 0.875rem;
  color: var(--c-blue);
  font-weight: 500;
}
.team-member__body {
  font-family: var(--ff-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-ink-light, #475569);
  margin: var(--s-2) 0 0;
  max-width: 280px;
}
@media (max-width: 768px) {
  .team-grid__list {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .team-member__photo { width: 140px; height: 140px; }
}

/* ========================================================================
   Prose — long-form structured text. Used for legal / policy pages.
   ======================================================================== */
.prose { padding: var(--s-7) 0 var(--s-9); }
.prose__chapter + .prose__chapter { margin-top: var(--s-7); }
.prose__title {
  font-family: var(--ff-heading);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
}
.prose__paragraph {
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-ink);
  margin: 0 0 var(--s-3);
}
.prose__paragraph:last-child { margin-bottom: 0; }
.prose__list {
  margin: 0 0 var(--s-3);
  padding-left: 1.25rem;
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-ink);
}
.prose__list li { margin-bottom: 0.35rem; }

/* ========================================================================
   Demo form — /demo page. Two-column layout, image on the left (sticky,
   aligned to top), copy + HubSpot embedded form on the right. The
   HubSpot embed is masked at the bottom to hide their footer/logo.
   ======================================================================== */
.demo-form {
  /* Extra top padding to clear the sticky header + breathing room so the
     section doesn't feel glued to the navigation. */
  padding: calc(var(--s-9) + 5rem) 0 var(--s-9) !important;
  background: var(--c-bg);
}
.demo-form__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-9);
  align-items: start;
}
.demo-form__visual {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.demo-form__visual img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  background: var(--c-bg);
}
.demo-form__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}
.demo-form__manifesto {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin: 0;
}
.demo-form__title {
  font-family: var(--ff-heading);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  color: var(--c-ink);
  margin: 0;
}
.demo-form__tagline {
  display: none;
}
.demo-form__bullets {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.demo-form__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--ff-body);
  font-size: 0.9375rem;
  color: var(--c-ink);
}
.demo-form__bullets svg {
  color: var(--c-blue);
  flex-shrink: 0;
  margin-top: 2px;
}
/* Closing paragraph — sits between the engagement bullets and the form,
   slightly emphasized typographically so it reads as a pin de marque. */
.demo-form__closing {
  margin: var(--s-4) 0 0;
  padding: var(--s-4) var(--s-5);
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-blue-soft);
  border-left: 3px solid var(--c-blue);
  border-radius: 0 12px 12px 0;
}
/* Raw embed, no card chrome. Sharp 64px bottom mask cuts the HubSpot
   "powered by" footer/logo cleanly out of the page. */
.demo-form__embed {
  width: 100%;
  margin-top: var(--s-5);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent calc(100% - 64px));
          mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent calc(100% - 64px));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.demo-form__embed .hs-form-frame { min-height: 320px; }
/* HubSpot internal classes — kill their default Step content padding so
   the form aligns flush with the page content. */
.demo-form__embed .hsfc-Step .hsfc-Step__Content { padding: 0 !important; }

@media (min-width: 1025px) {
  .demo-form__embed { margin-left: -40px; margin-top: -40px; }
}

@media (max-width: 1024px) {
  .demo-form { padding: calc(var(--s-7) + 6rem) 0 var(--s-7); }
  .demo-form__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
    align-items: start;
  }
  /* Mobile: hide the cover image and push the closing paragraph below the
     form by reordering the grid items (copy first, visual/closing last). */
  .demo-form__visual {
    position: relative;
    top: auto;
    aspect-ratio: auto;
    order: 2;
  }
  .demo-form__visual img { display: none; }
  .demo-form__copy { order: 1; }
}