/* ============================================================
   THESR LANDING — Design System
   ============================================================ */

/* The page the product is now.
 *
 * This was a dark landing in cream and orange, and the application it sells is
 * near-white with one navy accent - so a visitor met one product on the site
 * and a different one after signing in. The names below are unchanged, so
 * every rule in this file keeps working; what they point at is the palette the
 * application uses. The sections that were dark are paper, and the text that
 * was white on them is ink.
 */
:root {
  /* Palette */
  --c-dark:         #ffffff;
  --c-dark-2:       #f8f9fb;
  --c-dark-3:       #eef4ff;
  --c-brand:        #17356b;
  --c-brand-mid:    #244a86;
  --c-brand-light:  #3a63a8;
  --c-accent:       #17356b;
  --c-accent-light: #244a86;
  --c-cream:        #f8f9fb;
  --c-cream-2:      #eef4ff;
  --c-white:        #ffffff;
  --c-ink:          #0f172a;
  --c-ink-soft:     #475569;
  --c-ink-muted:    #94a3b8;
  --c-success:      #1a6b4a;

  /* Text on what used to be the dark sections */
  --c-dt:           #0f172a;
  --c-dt-soft:      #475569;
  --c-dt-muted:     #94a3b8;
  --c-ds:           rgba(15,23,42,0.035);
  --c-db:           #e6e8ec;

  /* Typography */
  /* La police de la marque d'abord : la pile ne nommait que des polices
     système, donc la page s'affichait en Iowan sur un Mac, en Palatino sur
     Windows, en Georgia ailleurs - trois pages différentes, et aucune comme le
     produit. Les suivantes restent en secours (23 septembre). */
  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-sans:  "IBM Plex Sans", "Inter", "Segoe UI", "Helvetica Neue", sans-serif;

  /* Spacing */
  --sec-pad: clamp(5rem, 9vw, 7.5rem);

  /* Radius */
  --r-2xl: 36px;
  --r-xl:  28px;
  --r-lg:  22px;
  --r-md:  16px;
  --r-sm:  10px;

  /* Shadows */
  --sh-xl: 0 72px 140px -60px rgba(7,15,28,0.70);
  --sh-lg: 0 44px 88px -44px rgba(7,15,28,0.50);
  --sh-md: 0 24px 48px -24px rgba(7,15,28,0.32);
  --sh-sm: 0 10px 24px -10px rgba(7,15,28,0.18);

  /* Nav */
  --nav-h: 78px;
}

/* ---- Reset & base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.landing-page {
  margin: 0;
  padding-top: var(--nav-h);
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.landing-page a    { color: inherit; text-decoration: none; }
.landing-page img  { display: block; max-width: 100%; height: auto; }
.landing-page ul   { margin: 0; padding: 0; list-style: none; }

/* The marketing page is the one place that keeps a display serif, and it says
   so with a flag: style.css marks every heading on the site as Palatino. */
.landing-page h1,
.landing-page h2,
.landing-page h3 {
  margin: 0;
  font-family: var(--font-serif) !important;
  letter-spacing: -0.03em;
  color: var(--c-ink);
}

.landing-page p { margin: 0; color: var(--c-ink-soft); }

/* Container */
.l-container {
  width: min(1240px, calc(100% - 2rem));
  margin: 0 auto;
}

/* Section defaults */
.l-section {
  position: relative;
  padding: var(--sec-pad) 0;
}

/* ---- Reveal animations ------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Shared: tags / eyebrows ------------------------------ */
.l-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  background: rgba(23,53,107,0.08);
  border: 1px solid rgba(23,53,107,0.14);
  color: var(--c-brand);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.l-tag--light {
  background: var(--c-ds);
  border-color: var(--c-db);
  color: var(--c-dt-soft);
}

.l-eyebrow {
  display: inline-flex;
  align-self: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.6rem;
  padding: 0.46rem 1rem 0.46rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--c-db);
  background: var(--c-ds);
  color: var(--c-dt-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.l-eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.25);
  animation: lDotPulse 2.4s ease-in-out infinite;
}
@keyframes lDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,0.25); }
  50%       { box-shadow: 0 0 0 6px rgba(74,222,128,0.08); }
}

/* ---- Shared: buttons -------------------------------------- */
.l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  border-radius: 999px;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease, color 0.24s ease;
  white-space: nowrap;
}
.l-btn:hover, .l-btn:focus { transform: translateY(-2px); outline: none; }

/* Every one of these is named through .landing-page, because
   `.landing-page a { color: inherit }` is more specific than a bare button
   class and was handing each of them the ink colour of the section it sits in
   - navy text on a navy button. Flat, too: the gradient was there to make one
   accent read as two, and there is one. */
.landing-page .l-btn--primary {
  color: #fff;
  background: var(--c-brand);
  box-shadow: none;
}
.landing-page .l-btn--primary:hover { color:#fff; background: var(--c-brand-mid); box-shadow: none; }

/* Named through .landing-page, because `.landing-page a { color: inherit }`
   is more specific than a bare button class and was handing every button the
   ink colour of the section it sat in - navy text on a navy button. */
.landing-page .l-btn--hero {
  color: #fff;
  background: var(--c-brand);
  box-shadow: none;
}
.landing-page .l-btn--hero:hover { color: #fff; background: var(--c-brand-mid); }

/* Second of a pair on paper: outlined, not filled with a line colour. Both of
   these were built for a dark hero - white on it, and a translucent white
   beside - and on paper they came out as two grey pills. */
.landing-page .l-btn--ghost {
  color: var(--c-brand);
  background: var(--c-white);
  border: 1px solid var(--c-db);
}
.landing-page .l-btn--ghost:hover { color: var(--c-brand); background: var(--c-dark-3); border-color: var(--c-brand-light); }

.landing-page .l-btn--outline {
  color: var(--c-brand);
  background: transparent;
  border: 1.5px solid rgba(23,53,107,0.24);
}
.landing-page .l-btn--outline:hover { background: rgba(23,53,107,0.05); }

.landing-page .l-btn--white {
  color: var(--c-brand);
  background: #fff;
  border: 1px solid var(--c-db);
  box-shadow: none;
}
.landing-page .l-btn--white:hover { color: var(--c-brand); background: var(--c-dark-3); }

.l-btn--sm { padding: 0.68rem 1.2rem; font-size: 0.9rem; }

/* L'adresse se tape dans le hero : le champ et le bouton sont assemblés en un
   seul contrôle - la colonne du hero fait 463px, et un champ de 240px plus un
   bouton de 221px avec un écart entre eux n'y tenaient pas : le bouton passait
   à la ligne (23 septembre). Sur un téléphone, ils se remettent l'un sous
   l'autre, chacun entier. */
.l-hero__capture {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem 0 0.9rem;
  max-width: 560px;
}
.l-hero__email {
  flex: 1 1 180px;
  min-width: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--c-db);
  border-right: 0;
  border-radius: 999px 0 0 999px;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 1rem;
}
.l-hero__capture .l-btn--hero {
  flex: 0 0 auto;
  border-radius: 0 999px 999px 0;
}

@media (max-width: 560px) {
  .l-hero__capture { gap: 0.6rem; }
  .l-hero__email {
    flex: 1 1 100%;
    border-right: 1px solid var(--c-db);
    border-radius: 999px;
  }
  .l-hero__capture .l-btn--hero {
    flex: 1 1 100%;
    justify-content: center;
    border-radius: 999px;
  }
}
.l-hero__email::placeholder { color: var(--c-ink-muted); }
.l-hero__email:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 4px rgba(23, 53, 107, 0.12);
}
.l-hero__reassure {
  margin: 0 0 1.4rem;
  color: var(--c-ink-muted);
  font-size: 0.86rem;
}
.l-btn--full { width: 100%; }

/* ---- Section header --------------------------------------- */
.l-section__head {
  max-width: 900px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.l-section__head--light h2,
.l-section__head--light p { color: var(--c-dt); }
.l-section__head--light p { color: var(--c-dt-soft); }

.l-section__head .l-tag { margin-bottom: 1.1rem; }
.l-section__head h2 {
  font-size: clamp(1.9rem, 2.9vw, 2.75rem);
  line-height: 1.08;
}
.l-section__head p {
  margin-top: 1rem;
  font-size: 1.08rem;
  line-height: 1.76;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.l-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1040;
  padding: 1rem 0;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid transparent;
  transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.l-nav.is-sticky {
  background: rgba(255,255,255,0.96);
  border-bottom-color: var(--c-db);
  box-shadow: 0 16px 48px -34px rgba(15,23,42,0.35);
}

.l-nav__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.l-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.l-nav__brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 8px 20px -10px rgba(23,53,107,0.8);
}

.l-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: auto;
  border: 1px solid var(--c-db);
  background: var(--c-white);
  border-radius: 10px;
  cursor: pointer;
}
/* Three white bars on a white chip is no menu button at all. */
.l-nav__toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--c-brand);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.l-nav__body {
  display: flex !important;
  align-items: center;
  gap: 1.4rem;
  margin-left: auto;
}

.l-nav__links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

/* .navbar-collapse is flex-basis:100%, so the body filled the bar while its
   contents stayed bunched against the brand: links, button, and then four
   hundred empty pixels to the right edge. Brand left, menu centred, the one
   thing you want clicked on the right. */
@media (min-width: 1200px) {
  .l-nav__links { margin-inline: auto; }
  .l-nav__cta { margin-left: auto; }
}
.l-nav__links li { list-style: none; }

/* Le lien et le bouton sont deux choses : sans écart entre eux, « Connexion »
   semblait écrit sur le bouton. */
.l-nav__cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* « Connexion » mène au produit plutôt qu'à une section : un lien, à côté du
   bouton de démo, pas dans la liste des sections. */
.l-nav__login {
  color: var(--c-ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.l-nav__login:hover { color: var(--c-brand); }
.l-nav__links a {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--c-ink-soft);
  transition: color 0.2s ease, background 0.2s ease;
}
.l-nav__links a:hover { color: var(--c-brand); background: rgba(23,53,107,0.06); }
.l-nav__links a.active {
  color: var(--c-brand);
  background: transparent;
}
/* A rule under the word, not a tinted pill: it says "you are here" without
   competing with the demo button beside it. */
.l-nav__links a.active::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.05rem;
  height: 2px;
  border-radius: 2px;
  background: var(--c-brand);
}

/* FR | EN, in the bar at every width. Defined once, here, because the nav is
   this sheet's to own. A hairline frame and the navy for the language you are
   reading; the other one is a muted label, so the pair reads as a state you
   can change rather than a second call to action next to the demo button. */
.l-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  /* Beside the burger below 1200px, where the auto margin puts it. */
  margin-left: auto;
  margin-right: 0.6rem;
  background: var(--c-white);
  border: 1px solid var(--c-db);
  border-radius: 8px;
}
.l-lang__opt {
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
  /* A small uppercase label takes positive tracking; the rest of the nav
     does not. */
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--c-ink-muted);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.l-lang__opt:hover { color: var(--c-brand); background: rgba(23, 53, 107, 0.06); }
.l-lang__opt.is-current,
.l-lang__opt.is-current:hover { color: var(--c-white); background: var(--c-brand); }
.l-lang__opt:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 2px;
}
@media (min-width: 1200px) {
  /* .l-nav__body already claims the free space with margin-left:auto, so the
     switch is ordered after it instead of fighting it for the same margin. */
  .l-lang { order: 3; margin-left: 0.9rem; margin-right: 0; }
  /* During maintenance there is no menu to claim it (public_header.html):
     the switch takes the free space itself, at the right edge. */
  .l-nav--bare .l-lang { margin-left: auto; }
}
/* base.html hangs a translucent globe dropdown in the bottom-left corner for
   the application's pages. The landing has the switch in its bar, and two
   language controls on one page is one control too many - the corner one also
   sits at half opacity over the page's own content. Hidden here, not removed
   from base.html, because the application's pages still rely on it. */
body.landing-page #lang-selector { display: none; }

@media (max-width: 1199px) {
  /* The burger claims the bar's free space with a margin-left:auto of its own.
     Two auto margins divide that space between them, which left the switch
     stranded in the middle of the bar - 475px from the burger it is supposed
     to sit beside, and reading as a stray control rather than part of the
     right-hand group. The switch takes the space; the burger follows it at the
     container's own gap. */
  .l-nav__toggle { margin-left: 0; }
}

/* How far down a twelve-thousand-pixel page you are. The nav is fixed, so
   without this the only cue is the scrollbar, and the page reads as
   endless. */
.l-nav__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.l-nav__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--c-brand), var(--c-brand-light, #3a63a8));
  transition: width 0.12s linear;
}

/* ============================================================
   HERO
   ============================================================ */
/* The hero used to be a dark section, so its texture was made of white at
   three per cent: a grid, three soft orbs, a faint wash. On paper all of it
   disappeared and the top of the page became a blank white rectangle. Same
   construction, drawn in the navy instead - a wash that lifts off the white, a
   grid you feel rather than read, and one warm-lit corner. */
.l-hero {
  overflow-x: clip;
  position: relative;
  padding: clamp(4rem, 7vw, 6rem) 0 0;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(23,53,107,0.10) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fc 58%, #eef3fa 100%);
  overflow: hidden;
}

.l-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.l-hero__orb {
  position: absolute;
  border-radius: 50%;
}
.l-hero__orb--1 {
  top: -18%;
  right: -8%;
  width: 52rem;
  height: 52rem;
  background: radial-gradient(circle, rgba(23,53,107,0.13) 0%, transparent 62%);
}
.l-hero__orb--2 {
  bottom: -22%;
  left: -12%;
  width: 44rem;
  height: 44rem;
  background: radial-gradient(circle, rgba(36,74,134,0.12) 0%, transparent 60%);
}
.l-hero__orb--3 {
  top: 30%;
  left: 40%;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(circle, rgba(58,99,168,0.10) 0%, transparent 60%);
}

.l-hero__grid {
  position: absolute;
  inset: 0;
  /* Two layers: a 64px rule grid, and a finer dot grid a third its size. Both
     in the navy at a few per cent, which is what makes it read as texture and
     not as a table. */
  background-image:
    linear-gradient(rgba(23,53,107,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,53,107,0.055) 1px, transparent 1px),
    radial-gradient(rgba(23,53,107,0.075) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 22px 22px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.6) 70%, transparent 100%);
}

.l-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3.5rem;
}


.l-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 860px;
}

.l-hero__copy h1 {
  font-size: clamp(3rem, 6.5vw, 5.6rem);
  line-height: 0.95;
  color: var(--c-ink);
  letter-spacing: -0.04em;
}
.l-hero__copy h1 span {
  background: linear-gradient(135deg, var(--c-accent-light), var(--c-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.l-hero__lead {
  max-width: 68ch;
  font-size: 1.12rem;
  line-height: 1.8;
  color: var(--c-ink-soft) !important;
}

.l-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

.l-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
/* Who it is for, as one quiet line under the buttons: three filled pills
   wrapped onto two rows and competed with the buttons above them. */
.l-hero__chips span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--c-ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
}
.l-hero__chips i { color: #4ade80; font-size: 0.72rem; }

/* Screenshot. The badges hang from its lower edge, so the frame keeps room
   under it for them. */
.l-hero__visual { width: 100%; max-width: 980px; position: relative; padding-bottom: 2.4rem; }

/* On a laptop the hero was a column: a headline the height of the window,
   then the lead, then the buttons, and the screenshot began below the fold.
   The first thing a visitor saw of a document product was therefore no
   document. Side by side, the promise and the proof arrive together - and
   the screenshot runs off the right edge, because a legible interface at
   this size needs more width than the half it would otherwise get. */
@media (min-width: 1080px) {
  .l-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 29rem) minmax(0, 1fr);
    align-items: center;
    text-align: left;
    gap: clamp(2.5rem, 4vw, 4rem);
    padding-bottom: clamp(3rem, 4vw, 4.5rem);
  }
  .l-hero__copy { align-items: flex-start; max-width: 29rem; gap: 1.25rem; }
  .l-hero__copy .l-eyebrow { align-self: flex-start; }
  .l-hero__copy h1 { font-size: clamp(2.4rem, 2.9vw, 3.1rem); line-height: 1.04; }
  .l-hero__lead { font-size: 1rem; line-height: 1.68; }
  .l-hero__actions,
  .l-hero__chips { justify-content: flex-start; }
  /* It used to run nine viewport-widths past the right edge, which read as a
     picture spilling off the page rather than as a product. It stays inside
     its column; the column is simply the larger of the two. */
  .l-hero__visual { max-width: none; width: 100%; }
  .l-hero__chips { gap: 0.4rem 0.95rem; }
  .l-hero__chips span { font-size: 0.8rem; }
}

.l-screenshot {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow:
    var(--sh-xl),
    0 0 0 1px var(--c-db),
    inset 0 1px 0 var(--c-db);
  background: #111827;
}

.l-screenshot__chrome {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.1rem;
  background: #1a2236;
  border-bottom: 1px solid var(--c-ds);
}
.l-screenshot__dots {
  display: flex;
  gap: 0.38rem;
}
.l-screenshot__dots span {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--c-db);
}
.l-screenshot__dots span:nth-child(1) { background: #ff5f57; }
.l-screenshot__dots span:nth-child(2) { background: #ffbd2e; }
.l-screenshot__dots span:nth-child(3) { background: #28c840; }

.l-screenshot__urlbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 300px;
  margin: 0 auto;
  padding: 0.3rem 0.8rem;
  border-radius: 6px;
  background: var(--c-ds);
  color: rgba(255,255,255,0.48);
  font-size: 0.78rem;
}
.l-screenshot__urlbar i { color: #4ade80; font-size: 0.7rem; }

.l-screenshot__body img {
  width: 100%;
  display: block;
  border-radius: 0;
}

/* Floating badges */
.l-screenshot__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px);
  box-shadow: var(--sh-md), 0 0 0 1px rgba(7,15,28,0.06);
}
/* Across the frame's lower edge, inside its width: laid over the screenshot
   they hid its results, and hung past its sides they were cut off by the
   section at 1440 and gave the page a sideways scrollbar at 1024. */
.l-screenshot__badge--speed {
  bottom: 0;
  left: 1.5rem;
  animation: lFloat 4s ease-in-out infinite;
}
.l-screenshot__badge--secure {
  bottom: 0;
  right: 1.5rem;
  animation: lFloat 4s ease-in-out infinite 1.8s;
}
@keyframes lFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.l-sbadge__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.l-screenshot__badge--speed .l-sbadge__icon {
  background: var(--c-brand);
}
.l-sbadge__text { line-height: 1; }
.l-sbadge__text strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--c-ink);
}
.l-sbadge__text span {
  display: block;
  margin-top: 0.18rem;
  font-size: 0.72rem;
  color: var(--c-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* ============================================================
   METRICS BAR
   ============================================================ */
.l-metrics {
  padding: 2.8rem 0;
  background: var(--c-white);
  border-bottom: 1px solid rgba(13,23,38,0.07);
}

.l-metrics__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.l-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: 0.5rem 1.5rem;
}
.l-metric__num {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  color: var(--c-brand);
  font-family: var(--font-serif);
  line-height: 1;
}
.l-metric__num strong {
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  color: var(--c-brand);
}
.l-metric__suf {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-family: var(--font-serif);
  color: var(--c-accent);
  font-weight: 700;
}
.l-metric p {
  max-width: 22ch;
  font-size: 0.92rem;
  line-height: 1.52;
}
.l-metrics__sep {
  width: 1px;
  height: 3.5rem;
  background: rgba(13,23,38,0.1);
  flex-shrink: 0;
}

/* ============================================================
   WHY — BEFORE / AFTER
   ============================================================ */
.l-why { background: var(--c-white); }

.l-why__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}

.l-why__panel {
  padding: 2rem;
  border-radius: var(--r-xl);
  border: 1px solid rgba(13,23,38,0.08);
}
.l-why__panel--before {
  background: linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}
.l-why__panel--after {
  background: linear-gradient(180deg, #f0f8f4 0%, #fff 100%);
  border-color: rgba(26,107,74,0.14);
}

.l-why__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.l-why__panel--before .l-why__label {
  background: rgba(220,50,47,0.08);
  color: #c0392b;
}
.l-why__panel--before .l-why__label i { color: #e74c3c; }
.l-why__panel--after .l-why__label {
  background: rgba(26,107,74,0.1);
  color: var(--c-success);
}
.l-why__panel--after .l-why__label i { color: var(--c-success); }

.l-why__list {
  display: grid;
  gap: 1.1rem;
}
.l-why__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.l-why__bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.5rem;
  flex-shrink: 0;
}
.l-why__bullet--no  { background: #e74c3c; }
.l-why__bullet--yes { background: var(--c-success); }

.l-why__list li > div { display: flex; flex-direction: column; gap: 0.2rem; }
.l-why__list li strong { font-size: 0.97rem; color: var(--c-ink); font-weight: 700; }
.l-why__list li span  { font-size: 0.9rem; line-height: 1.55; color: var(--c-ink-soft); }

.l-why__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(23,53,107,0.08);
  color: var(--c-brand);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ============================================================
   FEATURES
   ============================================================ */
.l-features { background: var(--c-cream); }
.l-features .l-section__head { margin-bottom: 3.25rem; }

/* Four rows, and each used to be a white card holding a tinted card holding
   three more cards: four borders deep before you reached a sentence. The row
   itself is not a thing you can click or read on its own - it is a paragraph
   of the section - so it gets no frame. What is left is the ground, one panel
   showing the product, and the rows inside it. */
.l-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.75rem, 4.5vw, 4rem) 0;
  border-top: 1px solid var(--c-db);
}
.l-features .l-feature:first-of-type { border-top: 0; padding-top: 0; }
.l-feature--rev { direction: rtl; }
.l-feature--rev > * { direction: ltr; }

.l-feature__copy {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.l-feature__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(23,53,107,0.1), rgba(23,53,107,0.12));
  color: var(--c-brand);
  font-size: 0.96rem;
  font-weight: 900;
  font-family: var(--font-sans);
}

.l-feature__copy h3 {
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  line-height: 1.03;
}

.l-feature__copy p { font-size: 1rem; line-height: 1.78; }

.l-checklist { display: grid; gap: 0.65rem; }
.l-checklist li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--c-ink-soft);
}
.l-checklist li::before {
  content: "";
  position: absolute;
  top: 0.52rem;
  left: 0;
  width: 0.52rem;
  height: 0.52rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand), var(--c-accent));
}

/* Feature visual shared */
.l-feature__visual {
  padding: 1.2rem;
  border-radius: var(--r-xl);
  background: var(--c-white);
  border: 1px solid var(--c-db);
  box-shadow: var(--sh-sm);
}

/* Doc stack */
.l-docstack { display: grid; gap: 0.75rem; }

.l-doctile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  background: var(--c-dark-2);
  border: 1px solid var(--c-line-soft, #eef0f4);
}
.l-doctile--accent { border-color: rgba(23,53,107,0.18); background: linear-gradient(135deg, rgba(23,53,107,0.04), rgba(23,53,107,0.03)); }

.l-doctile__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.l-doctile--accent .l-doctile__icon { background: linear-gradient(135deg, var(--c-accent), #0f2750); }

.l-doctile__info {
  flex: 1;
  min-width: 0;
}
.l-doctile__info strong {
  display: block;
  font-size: 0.9rem;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l-doctile__info span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.75rem;
  color: var(--c-ink-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.l-doctile__check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(26,107,74,0.12);
  color: var(--c-success);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.l-docstack__footer {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(23,53,107,0.08), rgba(23,53,107,0.04));
  border: 1px solid rgba(23,53,107,0.1);
  color: var(--c-brand);
  font-size: 0.88rem;
  font-weight: 700;
}

/* Search demo */
.l-searchdemo { display: grid; gap: 0.85rem; }

.l-searchdemo__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1.5px solid rgba(23,53,107,0.18);
  box-shadow: 0 0 0 4px rgba(23,53,107,0.06);
  color: var(--c-ink);
  font-size: 0.93rem;
  font-weight: 600;
}
.l-searchdemo__bar i { color: var(--c-brand); font-size: 0.95rem; flex-shrink: 0; }

.l-searchdemo__cursor {
  color: var(--c-brand);
  animation: lBlink 1.1s step-end infinite;
  font-weight: 300;
  margin-left: -0.2rem;
}
@keyframes lBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.l-searchdemo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.l-searchdemo__chips span {
  padding: 0.35rem 0.72rem;
  border-radius: 999px;
  background: rgba(23,53,107,0.1);
  color: var(--c-accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.l-searchdemo__results { display: grid; gap: 0.7rem; }

/* One of these is the hit and the rest are the runners-up, which is the whole
   point of showing two. The plain one was filled with --c-ink-soft: a token
   for text, mid-grey, which under the old dark section read as a faint tint
   and now reads as a slate slab with dark type on it. */
.l-sresult {
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1px solid var(--c-db);
}
.l-sresult--top {
  background: var(--c-brand);
  border-color: transparent;
  box-shadow: 0 16px 36px -22px rgba(23,53,107,0.55);
}

.l-sresult__meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--c-ink-muted);
}
/* On the navy card every one of these was a text colour meant for paper -
   #94a3b8 for the label, #475569 for the score - so the score all but
   disappeared into the card behind it. */
.l-sresult--top .l-sresult__meta { color: rgba(255,255,255,0.6); }
.l-sresult__score { color: var(--c-brand); }
.l-sresult--top .l-sresult__score { color: rgba(255,255,255,0.82); }

.l-sresult p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.l-sresult--top p { color: rgba(255,255,255,0.92); }
.l-sresult mark {
  background: rgba(23,53,107,0.12);
  color: var(--c-brand);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 700;
}
.l-sresult--top mark {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* Cap grid */
.l-capgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.l-capcell {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1px solid rgba(13,23,38,0.08);
}
.l-capcell--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.l-capcell--wide > div { display: flex; flex-direction: column; gap: 0.15rem; }

.l-capcell i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(23,53,107,0.1), rgba(23,53,107,0.12));
  color: var(--c-brand);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.l-capcell strong { font-size: 0.9rem; color: var(--c-ink); font-weight: 700; }
.l-capcell span   { font-size: 0.82rem; color: var(--c-ink-soft); }

/* ============================================================
   INTERFACE SHOWCASE (dark)
   ============================================================ */
.l-interface {
  background: var(--c-dark-2);
  padding-bottom: 0;
}
.l-interface .l-section__head { margin-bottom: 3rem; }

.l-iface-frame {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  box-shadow: var(--sh-xl), 0 0 0 1px var(--c-ds);
  background: #1a2236;
}

.l-iface-chrome {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.75rem 1.2rem;
  background: #212c42;
  border-bottom: 1px solid var(--c-ds);
}
.l-iface-chrome__left {
  display: flex;
  gap: 0.42rem;
}
.l-iface-chrome__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
}
.l-iface-chrome__left span:nth-child(1) { background: #ff5f57; }
.l-iface-chrome__left span:nth-child(2) { background: #ffbd2e; }
.l-iface-chrome__left span:nth-child(3) { background: #28c840; }

.l-iface-chrome__url {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 280px;
  margin: 0 auto;
  padding: 0.3rem 0.85rem;
  border-radius: 6px;
  background: var(--c-ds);
  color: rgba(255,255,255,0.44);
  font-size: 0.78rem;
}
.l-iface-chrome__url i { color: #4ade80; font-size: 0.68rem; }
.l-iface-chrome__right {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.l-iface-chrome__right span {
  width: 24px;
  height: 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
}

.l-iface-frame img {
  width: 100%;
  display: block;
  max-height: 520px;
  object-fit: cover;
  object-position: top;
}

.l-iface-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 2rem 0 3.5rem;
}

.l-iface-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  background: var(--c-ds);
  border: 1px solid var(--c-db);
  color: var(--c-ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
}
.l-iface-badge i { color: var(--c-accent-light); }

/* ============================================================
   SECURITY
   ============================================================ */
.l-security { background: var(--c-cream); }

.l-security__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 2rem;
  align-items: start;
}

.l-security__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.l-security__intro h2 {
  margin-top: 0.3rem;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  line-height: 1.1;
}
.l-security__intro > p {
  font-size: 1rem;
  line-height: 1.76;
}

.l-security__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
/* Du papier, comme les autres pastilles de la page. Le fond était
   `--c-ink-soft` - une ardoise pleine - sous un texte encre : 2,36 de
   contraste, soit deux gris l'un sur l'autre (23 septembre). C'est un reste de
   l'époque où cette section était sombre et où cette variable désignait une
   surface translucide. */
.l-security__chips span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--c-white);
  border: 1px solid var(--c-db);
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--c-ink);
}
.l-security__chips i { color: var(--c-brand); font-size: 0.78rem; }

.l-security__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}

.l-seccard {
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--c-db);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.l-seccard__icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(23,53,107,0.1), rgba(23,53,107,0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand);
  font-size: 1.05rem;
}

.l-seccard h3 { font-size: 1.05rem; line-height: 1.24; }
.l-seccard p  { font-size: 0.91rem; line-height: 1.65; }

/* ============================================================
   TESTIMONIALS (dark)
   ============================================================ */
.l-testimonials {
  background: var(--c-dark-3);
  position: relative;
  overflow: hidden;
}
.l-testimonials::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 40rem;
  height: 40rem;
  background: radial-gradient(circle, rgba(23,53,107,0.2), transparent 65%);
  pointer-events: none;
}
.l-testimonials::after {
  content: "";
  position: absolute;
  bottom: -30%;
  right: -5%;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle, rgba(23,53,107,0.12), transparent 65%);
  pointer-events: none;
}
.l-testimonials .l-container { position: relative; z-index: 1; }

.l-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.l-tcard {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.8rem;
  border-radius: var(--r-xl);
  background: var(--c-ds);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  transition: background 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.l-tcard:hover {
  background: var(--c-ds);
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}

.l-tcard__quote {
  color: var(--c-accent);
  font-size: 1.3rem;
  opacity: 0.7;
}

.l-tcard > p {
  flex: 1;
  font-size: 1rem;
  line-height: 1.76;
  color: var(--c-dt-soft) !important;
  font-style: italic;
}

.l-tcard__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--c-ds);
}

.l-tcard__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  flex-shrink: 0;
}

.l-tcard__author strong {
  display: block;
  font-size: 0.9rem;
  color: var(--c-dt);
  font-weight: 700;
}
.l-tcard__author span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--c-dt-muted);
}

/* ============================================================
   USE CASES
   ============================================================ */
.l-usecases { background: var(--c-white); }

.l-uc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.l-uccard {
  padding: 1.6rem 0 0;
  border-top: 2px solid var(--c-brand);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.l-uccard__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(23,53,107,0.1), rgba(23,53,107,0.14));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-brand);
  font-size: 1.1rem;
}

.l-uccard__tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.l-uccard h3 { font-size: 1.2rem; line-height: 1.2; }
.l-uccard p  { font-size: 0.93rem; line-height: 1.66; }

/* ============================================================
   PRICING
   ============================================================ */
.l-pricing { background: var(--c-cream); }

.l-pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: start;
}

.l-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.6rem;
  border-radius: var(--r-xl);
  background: var(--c-white);
  border: 1px solid rgba(13,23,38,0.09);
  box-shadow: var(--sh-sm);
}

.l-pcard--featured {
  background: linear-gradient(160deg, var(--c-brand-mid) 0%, var(--c-brand) 100%);
  border-color: transparent;
  box-shadow: var(--sh-lg);
  transform: scale(1.04);
  z-index: 1;
}

.l-pcard--enterprise {
  background: linear-gradient(160deg, #111827 0%, #1a2236 100%);
  border-color: transparent;
}

/* Le badge est une pastille de papier sur une carte sombre : il était blanc
   sur gris clair, 1,23 de contraste. */
.l-pcard__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-brand);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.l-pcard__top { display: flex; flex-direction: column; gap: 0.6rem; }
.l-pcard h3 { font-size: 1.4rem; }
.l-pcard--featured h3,
.l-pcard--enterprise h3 { color: #fff; }

/* Un bouton de contour se dessine dans la couleur de son texte, et sur une
   carte sombre ce texte est blanc : « Nous consulter » était navy sur presque
   noir, une forme qu'on devinait (23 septembre). */
.l-pcard--enterprise .l-btn--outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
}
.l-pcard--enterprise .l-btn--outline:hover,
.l-pcard--enterprise .l-btn--outline:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.l-pcard__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.l-pcard__price strong { font-family: var(--font-serif); font-size: 2.1rem; color: var(--c-ink); line-height: 1; }
.l-pcard__price span   { font-size: 0.88rem; color: var(--c-ink-soft); }
.l-pcard--featured .l-pcard__price strong,
.l-pcard--featured .l-pcard__price span,
.l-pcard--enterprise .l-pcard__price strong,
.l-pcard--enterprise .l-pcard__price span { color: #fff; }
.l-pcard__price--custom strong { font-size: 1.5rem; }

.l-pcard__feats {
  display: grid;
  gap: 0.72rem;
  flex: 1;
}
.l-pcard__feats li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.91rem;
  line-height: 1.52;
  color: var(--c-ink-soft);
}
/* Sur les deux cartes sombres, le texte est clair. Il était resté à
   `--c-ink-soft` : de l'ardoise sur du navy et sur du presque noir, illisible
   (23 septembre) - le même reste de conversion que les puces ci-dessus. */
.l-pcard--featured .l-pcard__feats li,
.l-pcard--enterprise .l-pcard__feats li { color: rgba(255, 255, 255, 0.9); }
.l-pcard__feats li i { color: var(--c-success); font-size: 0.78rem; margin-top: 0.2rem; flex-shrink: 0; }
.l-pcard--featured .l-pcard__feats li i,
.l-pcard--enterprise .l-pcard__feats li i { color: rgba(255,255,255,0.82); }

/* ============================================================
   FAQ
   ============================================================ */
.l-faq { background: var(--c-white); }

.l-faq__list,
.faq-accordion {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  gap: 0.8rem;
}

.faq-item {
  border-radius: var(--r-lg);
  background: var(--c-white);
  border: 1px solid rgba(13,23,38,0.09);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  text-align: left;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq-question::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--c-brand);
  flex-shrink: 0;
  transition: transform 0.28s ease;
}
.faq-item.open .faq-question::after { transform: rotate(180deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer p {
  padding: 0 1.5rem 1.3rem;
  font-size: 0.96rem;
  line-height: 1.72;
}

/* ============================================================
   FINAL CTA (dark)
   ============================================================ */
.l-cta {
  background: linear-gradient(160deg, var(--c-dark) 0%, var(--c-dark-3) 100%);
  position: relative;
  overflow: hidden;
}
.l-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -15%;
  width: 50rem;
  height: 50rem;
  background: radial-gradient(circle, rgba(23,53,107,0.12), transparent 60%);
  pointer-events: none;
}

.l-cta__inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.l-cta__copy { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.l-cta__copy h2 {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.06;
  color: var(--c-dt);
}
.l-cta__copy p {
  font-size: 1.08rem;
  line-height: 1.76;
  color: var(--c-dt-soft) !important;
  max-width: 62ch;
}

.l-cta__actions { margin-top: 0.5rem; }

.l-cta__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.l-cta__chips span {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: var(--c-ds);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--c-ink-soft);
  font-size: 0.84rem;
  font-weight: 600;
}

/* ============================================================
   CONTACT
   ============================================================ */
.l-contact { background: var(--c-cream); }

.l-contact__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.l-contact__head {
  text-align: center;
  max-width: 600px;
}

.l-contact__head h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.9rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.l-contact__head p {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--c-ink-soft);
}

/* hidden / removed */
.l-contact__copy { display: none; }

.l-contact__form {
  width: 100%;
  max-width: 640px;
  padding: 2rem 2.25rem;
  border-radius: var(--r-xl);
  background: var(--c-white);
  border: 1px solid rgba(13,23,38,0.09);
  box-shadow: var(--sh-md);
}

/* Contact form inner styles */
.landing-page .contact-form,
.l-contact__form .contact-form { display: flex; flex-direction: column; gap: 1.25rem; }

/* ---- Checkbox / privacy inside landing contact ---- */
.l-contact__form .privacy-check,
.l-contact__form .form-check {
  display: flex !important;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.875rem;
  color: var(--c-ink-soft);
  padding: 0.8rem 1rem;
  border-radius: 14px;
  background: rgba(23,53,107,0.04);
  border: 1px solid rgba(23,53,107,0.10);
  padding-left: 1rem !important;
}

/* Le bouton rond de l'interrupteur global (style.css) n'a rien à faire ici :
   WebKit le peint par-dessus la case native, Firefox non. */
.l-contact__form .privacy-check input[type="checkbox"]::before,
.l-contact__form .form-check .form-check-input::before {
  content: none !important;
}

.l-contact__form .privacy-check input[type="checkbox"],
.l-contact__form .form-check .form-check-input {
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin-top: 0.1rem !important;
  margin-left: 0 !important;
  float: none !important;
  accent-color: var(--c-accent);
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  border: 1px solid rgba(23,53,107,0.30) !important;
  border-radius: 4px !important;
  background: transparent !important;
  cursor: pointer;
}

.l-contact__form .privacy-check label,
.l-contact__form .form-check .form-check-label {
  cursor: pointer;
  line-height: 1.5;
  font-weight: 400;
}

.l-contact__form .privacy-check a,
.l-contact__form .form-check-label a {
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: underline;
}

/* form fields inside landing contact */
.l-contact__form .form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.l-contact__form .form-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-ink);
}

.l-contact__form .input-with-icon,
.l-contact__form .textarea-with-icon {
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(13,23,38,0.13);
  background: rgba(247,249,251,0.96);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.l-contact__form .input-with-icon:focus-within,
.l-contact__form .textarea-with-icon:focus-within {
  border-color: rgba(23,53,107,0.45);
  box-shadow: 0 0 0 3px rgba(23,53,107,0.14);
}

.l-contact__form .input-with-icon i,
.l-contact__form .textarea-with-icon i { color: var(--c-brand); font-size: 1rem; }

.l-contact__form .form-field input,
.l-contact__form .form-field textarea,
.l-contact__form .input-with-icon .form-control,
.l-contact__form .textarea-with-icon .form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100%;
  font-size: 1rem;
  color: var(--c-ink);
  font-family: var(--font-sans);
}

.l-contact__form .form-field textarea { resize: vertical; min-height: 130px; }

.l-contact__form .btn-primary,
.l-contact__form button[type="submit"] {
  align-self: stretch;
  text-align: center;
  background: linear-gradient(135deg, var(--c-accent-light), var(--c-accent)) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.85rem 1rem !important;
  font-weight: 700 !important;
  font-size: 1rem;
  box-shadow: 0 10px 28px -10px rgba(23,53,107,0.40) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
  cursor: pointer;
}

.l-contact__form .btn-primary:hover,
.l-contact__form button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px -12px rgba(23,53,107,0.52) !important;
}
.landing-page .contact-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.landing-page .contact-form .form-field { display: grid; gap: 0.4rem; }
.landing-page .contact-form label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--c-ink);
}
.landing-page .contact-form .input-with-icon,
.landing-page .contact-form .textarea-with-icon {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(13,23,38,0.11);
  box-shadow: inset 0 1px 0 var(--c-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.landing-page .contact-form .input-with-icon:focus-within,
.landing-page .contact-form .textarea-with-icon:focus-within {
  border-color: rgba(23,53,107,0.28);
  box-shadow: 0 0 0 3px rgba(23,53,107,0.08);
}
.landing-page .contact-form .input-with-icon i,
.landing-page .contact-form .textarea-with-icon i {
  color: var(--c-brand);
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.landing-page .contact-form input,
.landing-page .contact-form textarea {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 600;
  resize: vertical;
  box-shadow: none;
}
.landing-page .contact-form input:focus,
.landing-page .contact-form textarea:focus { outline: none; }
.landing-page .contact-form textarea { min-height: 140px; }
.landing-page .contact-form .form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--c-ink-soft);
}
.landing-page .contact-form .form-check input { width: auto; margin-top: 0.2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.landing-page .saas-footer {
  margin-top: 0;
  padding: 1.8rem 0 2.2rem;
  background: var(--c-cream-2);
  border-top: 1px solid rgba(13,23,38,0.1);
}
.landing-page .saas-footer .company,
.landing-page .saas-footer .footer-links a { color: rgba(13,23,38,0.65); }
.landing-page .saas-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
  .l-nav__body {
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem;
    margin-top: 0.8rem;
    border-radius: var(--r-lg);
    /* Another survivor of the dark design: a near-black sheet under navy
       links. On the white page the open menu was unreadable. */
    background: var(--c-white);
    border: 1px solid var(--c-db);
    box-shadow: var(--sh-lg);
  }
  .l-nav__body.show { display: flex !important; }
  .l-nav__links { width: 100%; }
  .l-nav__links li { width: 100%; }
  .l-nav__links a { display: block; width: 100%; padding: 0.72rem 0.5rem; }
  .l-nav__links a.active::after { left: 0.5rem; right: auto; width: 1.4rem; }
  .l-nav__toggle { display: flex; }
  .l-nav__inner { flex-wrap: wrap; }
  .l-nav__links { flex-direction: column; align-items: flex-start; gap: 0; }
  .l-nav__cta { width: 100%; }
  .l-nav__cta .l-btn { width: 100%; }

  .l-why__grid { grid-template-columns: 1fr; }
  .l-why__arrow { display: none; }

  .l-feature, .l-feature--rev { grid-template-columns: 1fr; direction: ltr; }
  .l-feature--rev > * { direction: ltr; }

  .l-security__layout { grid-template-columns: 1fr; }
  .l-testimonials__grid { grid-template-columns: 1fr; }
  .l-uc__grid { grid-template-columns: 1fr; }
  .l-pricing__grid { grid-template-columns: repeat(2, 1fr); }
  .l-pcard--featured { transform: none; }
  .l-contact__layout { grid-template-columns: 1fr; }
}

/* The stacked hero only: from 1080px the headline shares the row with the
   screenshot and takes its size from the side-by-side rule. Inside the
   1199px block it overrode that rule and doubled the headline at 1100. */
@media (max-width: 1079.98px) {
  .l-hero__copy h1 { font-size: clamp(2.8rem, 8vw, 4.5rem); }
}

@media (max-width: 767px) {
  .l-section { padding: 4rem 0; }
  .l-container { width: min(100% - 1.2rem, 1240px); }

  .l-hero__copy h1 { font-size: clamp(2.4rem, 10vw, 3.4rem); }
  .l-hero__actions .l-btn { width: 100%; }
  .l-hero__visual { padding: 0 0.5rem; }
  .l-screenshot__badge { display: none; }

  .l-metrics__row { flex-direction: column; gap: 1.8rem; }
  .l-metrics__sep { width: 60px; height: 1px; }

  .l-security__cards { grid-template-columns: 1fr; }
  .l-pricing__grid { grid-template-columns: 1fr; }

  .l-contact__form { padding: 1.3rem; }
  .landing-page .contact-form .form-grid { grid-template-columns: 1fr; }

  .l-cta__copy h2 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .l-cta__actions .l-btn { width: 100%; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal],
  .l-btn,
  .l-nav,
  .faq-answer,
  .faq-question::after,
  .l-tcard,
  .l-uccard,
  .l-screenshot__badge,
  .l-eyebrow__dot { transition: none !important; animation: none !important; }
}

/* ============================================================
   CONNECTORS — the ring, and what it is for
   ------------------------------------------------------------
   Five products on a circle around the mark. The track turns;
   each tile turns back by the same amount so its label stays
   the right way up, which is the whole trick. Nothing here
   moves for someone who has asked their system for less motion.
   ============================================================ */
.l-connect {
  background: var(--c-dark-2);
  border-top: 1px solid var(--c-db);
  border-bottom: 1px solid var(--c-db);
}

.l-connect__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.l-connect__visual {
  display: flex;
  justify-content: center;
}

.l-connect__copy {
  display: grid;
  gap: 1rem;
}

.l-connect__card {
  background: var(--c-white);
  border: 1px solid var(--c-db);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.6rem;
}

.l-connect__card-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--c-dark-3);
  color: var(--c-brand);
  font-size: 0.95rem;
}

.l-connect__card h3 {
  margin: 0.9rem 0 0.5rem !important;
  font-size: 1.22rem;
}

.l-connect__card > p {
  font-size: 0.97rem;
  line-height: 1.65;
  margin-bottom: 0.9rem;
}

.l-connect__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.l-connect__card li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  color: var(--c-ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.l-connect__card li i {
  margin-top: 0.3rem;
  color: var(--c-brand);
  font-size: 0.72rem;
}

/* Les pastilles sont posées sur le rayon, donc leur boîte déborde le cercle :
   à 390px, la piste mesurait 451px et la page se faisait tirer de 49px sur le
   côté. Ce qui dépasse est du vide - les pastilles, elles, tiennent - alors on
   le coupe (23 septembre). `clip` plutôt que `hidden` : `hidden` créerait un
   conteneur de défilement qui casserait le collage de la barre. */
.l-connect__visual {
  overflow-x: clip;
}

.l-orbit {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  /* The radius follows the box. Stated in px it was right at one width and
     wrong at every other - at 1024 the column is narrower than the ring and
     the tiles pushed the page sideways. cqmin measures the ring itself, which
     is what it always wanted; it needs the container declared, which is the
     part that was missing when this threw two tiles out of the section
     entirely. The px value is what engines without container queries get. */
  container-type: size;
  --orbit-r: 145px;
  /* Six sources on the ring, so a sixth of a turn between them. */
  /* Seven services around the core since Copilot joined. */
  --orbit-step: calc(360deg / 7);
}

@supports (container-type: size) {
  .l-orbit { --orbit-r: 36cqmin; }
}

.l-orbit__ring,
.l-orbit__ring--inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed var(--c-db);
}

.l-orbit__ring--inner {
  inset: 24%;
  border-style: solid;
  background: var(--c-white);
}

.l-orbit__core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 0.3rem;
  width: 104px;
  height: 104px;
  border-radius: 26px;
  background: var(--c-white);
  border: 1px solid var(--c-db);
  box-shadow: 0 18px 40px -26px rgba(15,23,42,0.35);
}

.l-orbit__core img { width: 46px; height: 46px; display: block; }
.l-orbit__core b {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-brand);
}

.l-orbit__track {
  position: absolute;
  inset: 0;
  animation: l-orbit-spin 52s linear infinite;
}

.l-orbit__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  /* Out to the radius along its own spoke, then the tile is un-turned by the
     same angle so it never reads sideways. The spacing is a variable on the
     ring so adding a source is one number, not three. */
  transform: rotate(calc(var(--i) * var(--orbit-step))) translate(0, calc(var(--orbit-r) * -1));
}
/* Which spoke an item sits on is its rank in the ring: written here rather
   than in a style="--i:3" on each of them, which the Content Security
   Policy's style-src-attr refuses. */
.l-orbit__item:nth-child(1) { --i: 0; }
.l-orbit__item:nth-child(2) { --i: 1; }
.l-orbit__item:nth-child(3) { --i: 2; }
.l-orbit__item:nth-child(4) { --i: 3; }
.l-orbit__item:nth-child(5) { --i: 4; }
.l-orbit__item:nth-child(6) { --i: 5; }
.l-orbit__item:nth-child(7) { --i: 6; }
.l-orbit__item:nth-child(8) { --i: 7; }

.l-orbit__chip {
  position: absolute;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * var(--orbit-step) * -1));
  animation: l-orbit-spin-back 52s linear infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 90px;
  height: 90px;
  padding: 0 0.3rem;
  text-align: center;
  border-radius: 22px;
  background: var(--c-white);
  border: 1px solid var(--c-db);
  box-shadow: 0 12px 28px -20px rgba(15,23,42,0.4);
  color: var(--c-ink);
}

.l-orbit__chip img { display: block; }
.l-orbit__chip b {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Each mark carries its own brand colour inside its own file: an <img> cannot
   inherit currentColor from the page, so tinting them from here would have
   left four black silhouettes. */

@keyframes l-orbit-spin { to { transform: rotate(360deg); } }
@keyframes l-orbit-spin-back { to { transform: translate(-50%, -50%) rotate(calc(var(--i) * var(--orbit-step) * -1 - 360deg)); } }

@media (max-width: 1099.98px) {
  .l-connect__layout { grid-template-columns: minmax(0, 1fr); }
  .l-orbit { width: min(100%, 320px); }
  .l-orbit__chip { width: 76px; height: 76px; border-radius: 18px; }
  .l-orbit__chip b { font-size: 0.56rem; }
  .l-orbit__core { width: 82px; height: 82px; border-radius: 21px; }
  .l-orbit__core img { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .l-orbit__track,
  .l-orbit__chip { animation: none; }
}

/* ============================================================
   SECTION RHYTHM
   ------------------------------------------------------------
   Flipping the palette left four sections in a row on the same
   tint - centralize, interface, connectors, security - so a
   third of the page read as one long grey slab with headings in
   it. They alternate, and the last call to action is the one
   dark moment on the page, which is where a dark moment earns
   its keep.
   ============================================================ */
.landing-page .l-metrics { background: var(--c-dark-2); }
.landing-page #interface { background: var(--c-white); }
.landing-page #security { background: var(--c-white); }

.landing-page .l-cta {
  background: var(--c-brand);
  background-image: none;
}
.landing-page .l-cta::before {
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 60%);
}
.landing-page .l-cta__copy h2 { color: #fff; }
.landing-page .l-cta__copy p { color: rgba(255,255,255,0.76) !important; }
.landing-page .l-cta .l-tag--light,
.landing-page .l-cta .l-tag {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}
.landing-page .l-cta__chips span {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.82);
}
/* On navy, the filled navy button disappears. White, with navy on it. */
.landing-page .l-cta .l-btn--hero {
  background: #fff;
  color: var(--c-brand);
}
.landing-page .l-cta .l-btn--hero:hover { background: var(--c-dark-3); color: var(--c-brand); }

/* ============================================================
   WORKSPACES — le dossier de travail (23 septembre)

   Le mot n'apparaissait qu'en passant, dans une énumération de la section IA,
   et l'unité de travail du produit - celle qui distingue Thesr d'un moteur de
   recherche sur un Drive - n'était vendue nulle part.
   ============================================================ */
.l-ws { background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%); }

.l-ws__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.l-ws__copy h2 {
  margin: 1.1rem 0 0;
  font-size: clamp(1.9rem, 2.9vw, 2.6rem);
  line-height: 1.1;
  color: var(--c-ink, #0f172a);
}

.l-ws__copy p {
  margin: 1rem 0 1.5rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--c-ink-soft, #475569);
}

.l-ws__card {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--c-db, #e6e8ec);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.09);
}

.l-ws__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--c-db, #e6e8ec);
  color: var(--c-ink, #0f172a);
}

.l-ws__head i { color: var(--c-brand, #17356b); }

.l-ws__label {
  margin: 1.1rem 0 0.5rem !important;
  font-size: 0.7rem !important;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-ink-muted, #94a3b8);
}

.l-ws .l-ws__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-ws__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--c-db, #e6e8ec);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-ink, #0f172a);
}

.l-ws .l-ws__rows {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-ws__rows li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  border-radius: 9px;
  background: var(--c-cream, #f8f9fb);
  font-size: 0.86rem;
  color: var(--c-ink-soft, #475569);
}

.l-ws__rows i { color: var(--c-brand, #17356b); flex: 0 0 auto; }
.l-ws__rows time { margin-left: auto; font-size: 0.78rem; color: var(--c-ink-muted, #94a3b8); }
.l-ws__chips i { color: var(--c-brand, #17356b); }

@media (max-width: 1020px) {
  .l-ws__inner { grid-template-columns: minmax(0, 1fr); }
}