/* ============================================================
   Telelisting 5 — Marketing site design system
   ============================================================ */

:root {
  /* Brand palette */
  --ink:        #16222e;   /* dark slate navy — telelisting.net header */
  --ink-2:      #1e2c3a;
  --navy:       #182634;
  --slate:      #33414f;
  --muted:      #5f6f7d;   /* darkened from the live site's #7a8895 to clear AA on --bg-soft */
  --line:       #dfe6ec;
  --line-soft:  #e6edf3;
  --bg:         #ffffff;
  --bg-soft:    #f2f6fa;
  --bg-mist:    #eaf3fa;

  /* Accents */
  --brand:      #1c6ea4;   /* brand blue (telelisting.net) */
  --brand-2:    #2a86c6;   /* lighter brand blue */
  --brand-dk:   #005296;   /* the logo wordmark blue */
  --cyan:       #5aa9dc;
  --green:      #0ba360;
  --green-bg:   #e6f7ee;
  --amber:      #f59e0b;
  --red:        #c0392b;
  --gold:       #d4af37;

  --grad-brand: linear-gradient(120deg, #005296 0%, #1c6ea4 55%, #2a86c6 120%);
  --grad-ink:   radial-gradient(1200px 600px at 15% -10%, #243a4d 0%, #16222e 55%);
  --grad-mist:  linear-gradient(180deg, #f2f6fa 0%, #ffffff 100%);

  --radius:     14px;
  --radius-lg:  22px;
  --radius-sm:  9px;
  --shadow-sm:  0 1px 2px rgba(22,34,46,.05), 0 2px 8px rgba(22,34,46,.05);
  --shadow:     0 4px 14px rgba(22,34,46,.07), 0 18px 40px rgba(22,34,46,.08);
  --shadow-lg:  0 20px 60px rgba(22,34,46,.18);

  --maxw: 1180px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dk); }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -.02em; line-height: 1.12; margin: 0; }
p { margin: 0 0 1rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--brand); background: #e6f0f8; border: 1px solid #cfe1f0;
  border-radius: 999px; padding: 6px 14px;
}
.tag.green { color: var(--green); background: var(--green-bg); border-color: #cdeede; }
.tag.gold  { color: #8a6d15; background: #fbf3d8; border-color: #f0e2ad; }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 14px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 650; font-size: 15.5px; line-height: 1;
  padding: 14px 24px; border-radius: 11px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 22px rgba(28,110,164,.32); }
.btn-primary:hover { color: #fff; box-shadow: 0 12px 30px rgba(28,110,164,.42); transform: translateY(-1px); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { color: var(--ink); border-color: #c0d5e4; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { color: #fff; background: #22303e; }
.btn-lg { padding: 17px 30px; font-size: 16.5px; }
.btn-block { width: 100%; }
.btn-white { background: #fff; color: var(--brand-dk); }
.btn-white:hover { color: var(--brand-dk); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn-outline-light:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ---------- "Trusted since 2004" spotlight (hero, above the screenshot) ---------- */
/* Stretch the column so the spotlight's top lines up with the "I'm an Agent / I'm a Brokerage"
   switch across the way, and the screenshot card's top lines up with the H1 (spotlight block is
   fixed-height, so the 59px gap lands the card level with "The AI-powered CRM"). */
.hero-right { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.hero-right .hero-card { margin: 0; }
.hero-clients { margin-bottom: 59px; }
.hc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.hc-rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.55));
}
.hc-rule:last-child { background: linear-gradient(90deg, rgba(212,175,55,.55), transparent); }
.hc-overline {
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55); white-space: nowrap;
}
.hc-stage { position: relative; height: 52px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hc-slide {
  position: absolute; display: inline-flex; align-items: center; gap: 13px; max-width: 100%;
  font-size: 21px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap;
  color: rgba(255,255,255,.95); text-shadow: 0 2px 18px rgba(0,0,0,.35);
  opacity: 1; transform: translateY(0);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.9,.3,1);
}
.hc-slide img {
  height: 28px; width: auto; background: #fff; border-radius: 7px; padding: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 4px 14px rgba(0,0,0,.35);
}
.hc-slide.enter { opacity: 0; transform: translateY(22px); transition: none; }
.hc-slide.exit  { opacity: 0; transform: translateY(-22px); }
.hc-slide-stat { font-size: 17px; font-weight: 700; letter-spacing: .03em; color: var(--gold, #d4af37); }
@media (prefers-reduced-motion: reduce) { .hc-slide, .hc-slide.enter, .hc-slide.exit { transition: none; transform: none; } }
@media (max-width: 980px) { .hero-clients { display: none; } }

/* ---------- Brokerage standards panel (brokerage.html #standards) ---------- */
.std-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 4px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; font-weight: 600;
}
.std-row:last-of-type { border-bottom: 0; }
.std-chip {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  border: 1px solid #cfe1f0; background: #e6f0f8; color: #005296;
  border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 700;
}
.std-foot { margin: 10px 4px 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Header ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
header.site .bar {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 24px;
  /* 10px, not 22px. The bar is capped at --maxw at every desktop width, so adding "Try the demo" left
     no room for generous gaps: the controls simply have to sit closer together. */
  display: flex; align-items: center; gap: 10px;
}
/* Nothing in the header may be shrunk into illegibility. Only the nav gives way, and it gives way by
   becoming the hamburger at the breakpoint at the end of this file — never by squeezing. */
header.site .brand,
header.site .phone-cta,
header.site .lang-toggle,
header.site .bar > .btn { flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--ink); letter-spacing: -.03em; }
.brand .mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--grad-brand);
  display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(28,110,164,.35);
}
.brand .five { color: var(--brand); }
.brand img.brand-logo { height: 42px; width: auto; display: block; flex: none; }   /* flex:none — a squeezed header must not squash the logo */
footer.site .brand img.brand-logo { height: 36px; }

/* Existing-client notice bar (injected by assets/js/site-notices.js) */
.classic-notice {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #16222e; color: #dbe9f4; font-size: 14px; padding: 9px 44px 9px 16px;
  position: relative; z-index: 60; text-align: center;
}
.classic-notice a { color: #7dbae2; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.classic-notice button {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: #8fa8bb; font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.classic-notice button:hover { color: #fff; }

/* Cookie / Loi 25 consent (injected by assets/js/site-notices.js) */
.cookie-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
  margin: 0 auto; max-width: 720px; display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--line, #dfe6ec); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(22, 34, 46, .18); padding: 14px 18px;
}
.cookie-consent p { margin: 0; font-size: 14px; color: var(--slate, #516070); flex: 1; }
.cookie-consent .btn { padding: 9px 22px; white-space: nowrap; }
@media (max-width: 560px) { .cookie-consent { flex-direction: column; align-items: stretch; text-align: center; } }
header nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
header nav a.navlink {
  color: var(--slate); font-weight: 550; font-size: 15px; padding: 8px 12px; border-radius: 8px;
}
header nav a.navlink:hover { color: var(--ink); background: var(--bg-soft); }
header .spacer { flex: 1; }
/* Two ordinary links (?lang=en / ?lang=fr) — the server decides the language, so this works with no
   JavaScript and for crawlers. It used to be <button>s driven by main.js. */
.lang-toggle {
  display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #fff;
}
.lang-toggle a {
  padding: 7px 12px; font-weight: 700; font-size: 13px; color: var(--muted);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.lang-toggle a:hover { color: var(--ink); }
.lang-toggle a.active { background: var(--ink); color: #fff; }
.menu-btn { display: none; }

/* ---------- Nav dropdown (Compliance) ---------- */
header nav { flex-wrap: nowrap; }
header nav a.navlink, .navdrop-btn { white-space: nowrap; }
.navdrop { position: relative; }
.navdrop-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--slate); font-weight: 550; font-size: 15px;
  padding: 8px 12px; border-radius: 8px;
}
.navdrop-btn:hover { color: var(--ink); background: var(--bg-soft); }
.navdrop-btn .caret { transition: transform .2s ease; }
.navdrop-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 232px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 7px; z-index: 60;
  display: none; flex-direction: column; gap: 2px;
}
.navdrop-menu a {
  padding: 9px 12px; border-radius: 8px; color: var(--slate);
  font-weight: 550; font-size: 14.5px; white-space: nowrap;
}
.navdrop-menu a:hover { background: var(--bg-soft); color: var(--ink); }
.navdrop:hover .navdrop-menu, .navdrop.open .navdrop-menu { display: flex; }
.navdrop:hover .caret, .navdrop.open .caret { transform: rotate(180deg); }

/* ---------- Audience switch (Agent / Brokerage) ---------- */
.aud-switch {
  display: inline-flex; gap: 5px; margin-bottom: 24px;
  padding: 5px; border-radius: 15px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px);
}
.aud-switch a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 11px;
  font-weight: 650; font-size: 15.5px; color: #bcd4e6;
  transition: background .18s ease, color .18s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.aud-switch a:hover { color: #fff; background: rgba(255,255,255,.06); }
.aud-switch a.active {
  background: #fff; color: var(--brand-dk);
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.aud-switch a.active:hover { color: var(--brand-dk); }
@media (max-width: 520px) {
  .aud-switch { width: 100%; }
  .aud-switch a { flex: 1; justify-content: center; padding: 11px 12px; font-size: 14.5px; }
}
.broker-teaser {
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(135deg, #f2f7fb 0%, #e9f2f9 100%);
  padding: 44px 48px; text-align: center;
}
.broker-teaser .txt { max-width: 680px; margin: 0 auto; }
.broker-teaser h2 { margin: 16px 0 10px; }
.broker-teaser p { color: var(--muted); font-size: 16.5px; margin: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #e8f1f8;
  background: var(--grad-ink);
  padding: 78px 0 90px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(42,134,198,.35), transparent 60%),
    radial-gradient(500px 300px at 10% 90%, rgba(90,169,220,.22), transparent 60%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: .98fr 1.02fr; gap: 48px; align-items: center; }
.hero .tag { background: rgba(255,255,255,.09); color: #dbe9f4; border-color: rgba(255,255,255,.18); }
.hero h1 { color: #fff; font-size: clamp(32px, 4vw, 48px); margin: 20px 0 18px; letter-spacing: -.03em; }
.hero h1 .nw { white-space: nowrap; }
.hero h1 .grad { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { font-size: 19.5px; color: #b0c5d6; max-width: 560px; margin-bottom: 30px; }
.hero .lede strong { color: #fff; font-weight: 650; }
/* Hero benefits as scannable bullets (replaces the paragraph lede). */
.hero-points { display: grid; gap: 10px; max-width: 580px; margin: 0 0 28px; font-size: 16.5px; color: #b0c5d6; }
.hero-points li { display: flex; gap: 11px; align-items: flex-start; line-height: 1.45; }
.hero-points svg { color: var(--cyan); flex-shrink: 0; margin-top: 3px; }
.hero-points strong { color: #fff; font-weight: 650; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
/* In-your-face price anchor under the CTAs. */
.hero .price-line { margin-top: 18px; font-size: 20px; font-weight: 650; color: #dbe9f4; }
.hero .price-line b { font-size: 32px; font-weight: 800; color: #f6c94c; letter-spacing: -.01em; }   /* brighter than --gold so it pops on the navy hero */
.hero-meta { margin-top: 26px; display: flex; gap: 26px; flex-wrap: wrap; color: #97b0c6; font-size: 14.5px; }
.hero-meta b { color: #fff; }
.hero-meta .dot { color: var(--cyan); margin-right: 7px; }

/* Hero product card / funnel preview */
.hero-card {
  background: linear-gradient(180deg, #ffffff, #f5f9fc);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero-card .cap {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); background: #fff;
}
.hero-card .cap .dots { display: flex; gap: 6px; }
.hero-card .cap .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.hero-card .cap .dots i:nth-child(1){ background:#ff5f57; } .hero-card .cap .dots i:nth-child(2){ background:#febc2e; } .hero-card .cap .dots i:nth-child(3){ background:#28c840; }
.hero-card .cap .title { font-size: 13px; color: var(--muted); font-weight: 600; }
.hero-card .body { padding: 18px; }

/* Funnel visual */
.funnel { display: flex; flex-direction: column; gap: 9px; }
.funnel .stage {
  --w: 100%;
  margin: 0 auto; width: var(--w);
  border-radius: 10px; padding: 12px 16px; color: #fff; font-weight: 600; font-size: 14px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 6px 16px rgba(22,34,46,.12);
}
.funnel .stage small { font-weight: 500; opacity: .9; font-size: 12.5px; }
.funnel .stage b { font-size: 15px; }
.funnel .s1 { background: linear-gradient(90deg,#005296,#14669e); width: 100%; }
.funnel .s2 { background: linear-gradient(90deg,#14669e,#1c6ea4); width: 86%; }
.funnel .s3 { background: linear-gradient(90deg,#1c6ea4,#2a86c6); width: 68%; }
.funnel .s4 { background: linear-gradient(90deg,#2a86c6,#3d95cf); width: 48%; }
.funnel .s5 { background: linear-gradient(90deg,#3d95cf,#0ba360); width: 32%; }

/* Hero rotating screenshot show */
.hero-card.hero-show { border-radius: 6px; }   /* screenshots read better square-edged */
/* The bar carries the slide's description (bilingual spans copied from the figcaption). */
.hero-show .cap .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-show .shot figcaption { display: none; }
.hero-show .shots { position: relative; aspect-ratio: 16 / 10; background: #101c26; }
.hero-show .shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.hero-show .shot.active { opacity: 1; pointer-events: auto; }
.hero-show .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.hero-show .shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 16px 12px;
  color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  background: linear-gradient(180deg, transparent, rgba(16,28,38,.85));
}
.hero-show .show-nav { display: flex; gap: 7px; justify-content: center; align-items: center; padding: 11px 0 13px; background: #fff; }
.hero-show .show-nav button {
  width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0;
  background: #c5dae8; cursor: pointer; transition: background .25s ease, width .25s ease;
}
.hero-show .show-nav button.active { background: var(--brand); width: 22px; }

/* Always-visible sales number — zero friction to call. Icon-only when the header gets tight. */
.phone-cta { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; font-size: 15px; color: var(--ink); white-space: nowrap; }
.phone-cta svg { color: var(--brand); flex-shrink: 0; }
.phone-cta:hover { color: var(--brand); }
/* Icon-only in the header, at every width. The bar is capped at --maxw, and with "Try the demo" in it
   the number as text no longer fits in either language (French is the binding case: its nav and both
   button labels are wider). The icon stays a live tel: link, and the number itself is written out in
   the footer and in the closing call-to-action. */
header.site .phone-cta .num { display: none; }

/* "Try the demo" appears once at every width: the header button on desktop, the nav link inside the
   collapsed menu below the breakpoint. Showing both would crowd a 375px header, which already carries
   the logo, the phone, the language toggle and Log in. Tied to the same 1120px width as the nav
   collapse — the nav link has nowhere to live while the nav is a hamburger. */
.demo-navlink, .login-navlink { display: none; }
@media (max-width: 1180px) {
  header.site .demo-cta { display: none; }
  header nav.open .demo-navlink { display: block; }
}
/* On a phone Log in moves into the menu too. Measured at 375px in French: the logo, the phone icon,
   the language toggle, "Se connecter" and the menu button need ~444px, so the bar overflowed and the
   whole page scrolled sideways. */
@media (max-width: 480px) {
  header.site .bar > .btn-ghost { display: none; }
  header nav.open .login-navlink { display: block; }
}
.cta-final .phone-line { margin-top: 22px; font-size: 17px; color: #c9dce9; }
.cta-final .phone-line a { color: #fff; font-weight: 800; text-decoration: none; }
.cta-final .phone-line a:hover { text-decoration: underline; }

/* ---------- Trust bar ---------- */
.trust { background: var(--bg-soft); border-bottom: 1px solid var(--line-soft); padding: 22px 0; }
.trust .wrap { display: flex; align-items: center; justify-content: center; gap: 14px 40px; flex-wrap: wrap; }
.trust .lbl { color: var(--muted); font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.trust .item { display: flex; align-items: center; gap: 9px; color: var(--slate); font-weight: 600; font-size: 15px; }
.trust .item svg { color: var(--brand); }

/* ---------- Section shells ---------- */
section.blk { padding: 84px 0; }
section.blk.soft { background: var(--bg-soft); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
section.blk.ink { background: var(--grad-ink); color: #c6dbe9; }
section.blk.ink h2 { color: #fff; }
.sec-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 14px; }
.sec-head p { color: var(--muted); font-size: 18px; margin: 0; }
section.blk.ink .sec-head p { color: #97b0c6; }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.stat { text-align: center; padding: 8px; }
.stat .n { font-size: clamp(30px,3.4vw,42px); font-weight: 800; letter-spacing: -.03em;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .l { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
section.blk.ink .stat .l { color: #97b0c6; }

/* Feature cards */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cddfec; }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { color: var(--slate); font-size: 15.5px; margin: 0; }
.card .uniq { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--gold);
  background: #fbf6e3; border: 1px solid #f0e6be; padding: 3px 9px; border-radius: 999px; letter-spacing: .04em; }

/* Feature tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 34px; }
.tabs button {
  border: 1px solid var(--line); background: #fff; color: var(--slate); font-weight: 600; font-size: 14.5px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer; transition: all .15s;
}
.tabs button:hover { border-color: #c0d5e4; }
.tabs button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.tabpane { display: none; }
.tabpane.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Split feature rows */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split + .split { margin-top: 72px; }
.split.rev .txt { order: 2; }
.split .txt h3 { font-size: clamp(24px,2.8vw,32px); margin-bottom: 14px; }
.split .txt p { color: var(--slate); font-size: 17px; }
.split ul.checks { list-style: none; padding: 0; margin: 18px 0 0; }
.split ul.checks li { display: flex; gap: 11px; padding: 8px 0; color: var(--ink); font-size: 15.5px; }
.split ul.checks li svg { flex: none; color: var(--green); margin-top: 3px; }

/* Panel mock (generic app frame) */
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.panel .head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.panel .head .dots { display: flex; gap: 6px; }
.panel .head .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; background: #c9dbe8; }
.panel .head .t { font-size: 13px; color: var(--muted); font-weight: 650; }
.panel .content { padding: 20px; }

/* Kanban mock */
.kanban { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.kcol { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.kcol .kh { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--slate); margin-bottom: 10px; }
.kcol .kh .cnt { color: #fff; font-size: 11px; padding: 1px 8px; border-radius: 999px; }
.kcol:nth-child(1) .cnt { background: #1c6ea4; } .kcol:nth-child(2) .cnt { background: #2a86c6; }
.kcol:nth-child(3) .cnt { background: #3d95cf; } .kcol:nth-child(4) .cnt { background: #0ba360; }
.kcard { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 10px; margin-bottom: 8px; box-shadow: var(--shadow-sm); }
.kcard .nm { font-weight: 650; font-size: 13px; }
.kcard .mt { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.kcard .val { color: var(--green); font-weight: 700; font-size: 12.5px; margin-top: 6px; }

/* Leaderboard mock */
.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb th, .lb td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.lb th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lb td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.lb .rank { width: 26px; height: 26px; border-radius: 8px; background: var(--bg-mist); color: var(--brand); font-weight: 800; display: grid; place-items: center; font-size: 12px; }
.lb tr:hover td { background: var(--bg-soft); }
.bar-mini { height: 7px; border-radius: 5px; background: var(--grad-brand); }

/* ---------- Compliance (gov style) ---------- */
.gov { background: #ffffff; }
.gov-band { background: #2b3f4f; color: #fff; }
.gov-note {
  border-left: 4px solid var(--green); background: var(--green-bg); border-radius: 8px;
  padding: 16px 20px; color: #14503a; font-size: 15.5px;
}
.gov-note b { color: #0a5a3c; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; align-items: stretch; }
.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.plan.feat { border: 2px solid var(--brand); box-shadow: var(--shadow); position: relative; }
.plan.feat .pop { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--grad-brand); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; letter-spacing: .05em; }
.plan h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.plan .amt { font-size: 42px; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 2px; }
.plan .amt small { font-size: 16px; color: var(--muted); font-weight: 600; }
.plan .per { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.plan ul li { display: flex; gap: 10px; padding: 7px 0; font-size: 14.5px; color: var(--slate); border-bottom: 1px dashed var(--line-soft); }
.plan ul li svg { flex: none; color: var(--green); margin-top: 3px; }
.addon { margin-top: 26px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.addon .amt { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.addon .amt small { font-size: 14px; color: var(--muted); font-weight: 600; }

/* Recharge / ROI table */
.roi-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.roi-scroll { overflow-x: auto; }
table.roi { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; min-width: 780px; }
table.roi th, table.roi td { padding: 14px 15px; text-align: right; border-bottom: 1px solid var(--line); }
table.roi thead th { background: var(--bg-soft); font-weight: 700; color: var(--ink); font-size: 13.5px; }
table.roi thead th.grp { text-align: center; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg-mist); }
table.roi th:first-child, table.roi td:first-child { text-align: left; font-weight: 650; }
table.roi td.tot { font-weight: 700; background: #f9fbfd; }
table.roi tbody tr:last-child td { border-bottom: none; }
table.roi tbody tr:hover td:not(.net):not(.tot) { background: var(--bg-soft); }
table.roi td.net { color: var(--green); font-weight: 700; background: var(--green-bg); }
table.roi td.net small { opacity: .8; font-weight: 500; margin-left: 4px; }

/* ---------- Product showcase gallery ---------- */
.shot-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-lg);
}
.shot-frame .bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #eef4fa; border-bottom: 1px solid var(--line);
}
.shot-frame .bar .dots { display: flex; gap: 6px; }
.shot-frame .bar .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.shot-frame .bar .dots i:nth-child(1){ background:#ff5f57; } .shot-frame .bar .dots i:nth-child(2){ background:#febc2e; } .shot-frame .bar .dots i:nth-child(3){ background:#28c840; }
.shot-frame .bar .url {
  flex: 1; text-align: center; font-size: 12.5px; color: var(--muted); font-weight: 550;
  background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 5px 12px; max-width: 360px; margin: 0 auto;
}
.shot-frame img { width: 100%; display: block; }
.shot-cap { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 14px; }
.shot-cap b { color: var(--ink); }
/* Cap the strip's width so the 11 pills break into two balanced centered rows (6+5)
   instead of a long row with a 2-pill orphan line. FR labels run longer. */
.gallery-tabs { flex-wrap: wrap; max-width: 800px; margin-left: auto; margin-right: auto; }
html.lang-fr .gallery-tabs { max-width: 860px; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.quote .stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.quote p { font-size: 16px; color: var(--ink); }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.quote .who .av { width: 42px; height: 42px; border-radius: 50%; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font-weight: 700; }
.quote .who .nm { font-weight: 700; font-size: 14.5px; }
.quote .who .rl { color: var(--muted); font-size: 13px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 650; font-size: 16.5px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand); font-size: 24px; font-weight: 400; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details .a { padding: 0 22px 20px; color: var(--slate); font-size: 15.5px; }

/* ---------- CTA banner ---------- */
.cta-final { background: var(--grad-ink); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-final::before { content:""; position:absolute; inset:0;
  background: radial-gradient(600px 260px at 50% 0%, rgba(42,134,198,.4), transparent 60%); }
.cta-final .wrap { position: relative; z-index: 1; padding: 84px 24px; }
.cta-final h2 { color: #fff; font-size: clamp(30px,4vw,44px); margin-bottom: 14px; }
.cta-final p { color: #b0c5d6; font-size: 19px; max-width: 620px; margin: 0 auto 30px; }
.cta-final .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */
footer.site { background: var(--ink); color: #93a9bb; padding: 60px 0 30px; }
footer.site .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
footer.site .brand { color: #fff; }
footer.site h5 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 14px; }
footer.site a { color: #93a9bb; display: block; padding: 5px 0; font-size: 14.5px; }
footer.site a:hover { color: #fff; }
footer.site .about { max-width: 320px; font-size: 14.5px; margin-top: 14px; }
footer.site .btm { margin-top: 44px; padding-top: 22px; border-top: 1px solid #263441;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
/* Links in the bottom line flow inline ("© … · Privacy Policy · Terms") — the block display
   above is only meant for the link columns. */
footer.site .btm a { display: inline; padding: 0; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* i18n visibility — both languages live in the DOM, one is hidden by <html> class */
html.lang-en [lang="fr"] { display: none !important; }
html.lang-fr [lang="en"] { display: none !important; }
/* keep inline flow for phrase-level swaps */
:is(h1,h2,h3,h4,p,span,a,li,small,strong,div,button,summary) > [lang]:not(div):not(section) { }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .split, .split.rev .txt { grid-template-columns: 1fr; order: 0; }
  .split { gap: 30px; }
  .grid-3, .quotes, .price-grid { grid-template-columns: 1fr 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2,1fr); gap: 26px; }
}
/* The header collapses to the hamburger at 1120px, NOT at the 720px used for page layout below.
   Measured in French (the binding case): even with the number reduced to its icon, the bar needs
   ~1110px for logo + nav + language + both buttons, so below --maxw the desktop nav no longer
   coexists with the right-hand cluster and becomes the hamburger instead. */
@media (max-width: 1180px) {
  header.site .bar { gap: 10px; padding: 10px 14px; }
  .brand img.brand-logo { height: 30px; }
  header nav { display: none; }
  .menu-btn { display: inline-grid; place-items: center; width: 42px; height: 40px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; }
  header nav.open { display: flex; position: absolute; top: 64px; left: 12px; right: 12px; flex-direction: column; align-items: stretch;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); }
  /* Dropdown flows inline (not floating) inside the mobile menu. */
  .navdrop { width: 100%; }
  .navdrop-btn { width: 100%; justify-content: space-between; }
  .navdrop-menu { position: static; box-shadow: none; border: 0; padding: 2px 0 2px 12px; min-width: 0; }
}
@media (max-width: 720px) {
  .grid-3, .grid-2, .quotes, .price-grid, .kanban { grid-template-columns: 1fr; }
  .hero { padding: 54px 0 64px; }
  section.blk { padding: 60px 0; }
}