/* The shared look for the public site: structure, spacing, navbar and type follow the Curevanta reference
   (see the design spec). BridgeMD keeps its own colours, content and product scenes.
   Loaded after company.css and fonts.css. Edited by the orchestrator only; section agents use these tokens
   and classes and report any change they need. */

:root {
  --cv-f: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cv-fd: "Inter Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The same three steps as --ink, --text and --muted on the homepage (company.css): ink for headings, dark gray
     for body text, light gray for captions and sources. Light gray holds 4.5 to 1 on white and on every pale surface below. */
  --cv-ink: #0b1424;
  --cv-text: #39465c;
  --cv-muted: #5f6c83;
  --cv-accent: #1257b0;
  --cv-accent-d: #0e4590;
  --cv-surface: #f3f6fb;
  --cv-surface-2: #e8eef8;
  --cv-line: rgba(10, 20, 40, .10);
  --cv-line-2: rgba(10, 20, 40, .18);
  --cv-dark: #0b1730;
  --cv-dark-2: #12224a;
  --cv-dark-3: #1a2d5c;
  --cv-line-dark: rgba(255, 255, 255, .12);
  --cv-on-dark: rgba(255, 255, 255, .78);
  --cv-on-dark-2: rgba(255, 255, 255, .62);

  --cv-w: 1104px;          /* content width */
  --cv-gut: 48px;          /* side padding of the container */
  --cv-sec: 112px;         /* vertical padding of a section */
  --cv-inset: 12px;        /* page inset of the big rounded card sections */
  --cv-r-card: 28px;       /* big card sections and large media */
  --cv-r-tile: 22px;       /* tiles and cards inside a section */
  --cv-r-pill: 100px;
  --cv-gap: 16px;
  --cv-ease: cubic-bezier(.22, 1, .36, 1);
}
@media (max-width: 1199px) { :root { --cv-gut: 32px; --cv-sec: 88px; } }
@media (max-width: 767px) { :root { --cv-gut: 20px; --cv-sec: 72px; --cv-inset: 8px; --cv-r-card: 22px; } }

/* One font family everywhere: Inter for text, Inter Display (the optical size cut) for headings. */
body.pub-marketing.cx-page {
  --f-disp: var(--cv-fd);
  --f-serif: var(--cv-fd);
  --f-mono: var(--cv-f);
  --ink: var(--cv-ink);
  --accent: var(--cv-accent);
  --accent-d: var(--cv-accent-d);
}
body.cx-page, body.fx { font-family: var(--cv-f); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; color: var(--cv-ink); }

/* ---------- Layout ---------- */
.cv-wrap { width: 100%; max-width: calc(var(--cv-w) + var(--cv-gut) * 2); margin: 0 auto; padding: 0 var(--cv-gut); box-sizing: border-box; }
.cv-sec { padding: var(--cv-sec) 0; }
/* A big rounded colour card that sits inset from the page edge. Put a .cv-wrap-in inside it. */
.cv-card-sec { position: relative; margin: 0 var(--cv-inset); padding: var(--cv-sec) 36px; border-radius: var(--cv-r-card); box-sizing: border-box; overflow: hidden; }
@media (max-width: 1199px) { .cv-card-sec { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 767px) { .cv-card-sec { padding-left: 18px; padding-right: 18px; } }
.cv-wrap-in { width: 100%; max-width: var(--cv-w); margin: 0 auto; }
.cv-soft { background: var(--cv-surface); }
.cv-dark { background: var(--cv-dark); color: #fff; }
.cv-dark :is(.cv-lead, .cv-body) { color: var(--cv-on-dark); }
.cv-dark .cv-small { color: var(--cv-on-dark-2); }

/* The split header every section opens with: label and title on the left, intro and a button on the right. */
.cv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; margin-bottom: 56px; }
.cv-head-title { flex: 1 1 380px; max-width: 600px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cv-head-intro { flex: 0 1 440px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
@media (max-width: 767px) { .cv-head { margin-bottom: 40px; } }

.cv-eyebrow { display: inline-flex; align-items: center; height: 27px; padding: 0 14px; border: 1px solid var(--cv-line); border-radius: var(--cv-r-pill); font: 500 11px/13.2px var(--cv-f); letter-spacing: .08em; text-transform: uppercase; color: var(--cv-ink); background: transparent; white-space: nowrap; }
.cv-dark .cv-eyebrow, .cv-eyebrow.is-dark { border-color: var(--cv-line-dark); color: #fff; }

/* ---------- Type ---------- */
.cv-h1, .cv-h2, .cv-h3, .cv-h4, .cv-num { margin: 0; font-family: var(--cv-fd); font-weight: 500; color: inherit; }
.cv-h1 { font-size: 68px; line-height: 70.72px; letter-spacing: -.035em; }
.cv-h2 { font-size: 46px; line-height: 50.6px; letter-spacing: -.03em; }
.cv-h3 { font-size: 22px; line-height: 28.6px; letter-spacing: -.01em; }
.cv-h4 { font-size: 18px; line-height: 24.3px; letter-spacing: -.01em; }
.cv-num { font-size: 64px; line-height: 64px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cv-lead { margin: 0; font: 400 17px/27.2px var(--cv-f); letter-spacing: -.01em; color: var(--cv-text); }
.cv-body { margin: 0; font: 400 15px/24px var(--cv-f); letter-spacing: -.005em; color: var(--cv-text); }
.cv-small { margin: 0; font: 400 13px/19.5px var(--cv-f); color: var(--cv-muted); }
@media (max-width: 1199px) {
  .cv-h1 { font-size: 54px; line-height: 56px; } .cv-h2 { font-size: 38px; line-height: 42px; } .cv-num { font-size: 54px; line-height: 54px; }
  .cv-h3 { font-size: 21px; line-height: 27.3px; } .cv-lead { font-size: 16px; line-height: 25.6px; }
}
@media (max-width: 767px) {
  .cv-h1 { font-size: 42px; line-height: 44px; } .cv-h2 { font-size: 32px; line-height: 35px; } .cv-num { font-size: 46px; line-height: 46px; }
  .cv-h3 { font-size: 20px; line-height: 26px; }
}

/* ---------- Buttons: a pill with a round icon on the right ---------- */
.cv-btn { display: inline-flex; align-items: center; gap: 14px; height: 50px; padding: 6px 6px 6px 22px; border: 1px solid transparent; border-radius: var(--cv-r-pill); background: #fff; color: var(--cv-ink); font: 500 15px/1 var(--cv-f); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .25s var(--cv-ease), border-color .25s ease, color .25s ease; }
.cv-btn > i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--cv-ink); color: #fff; font-style: normal; transition: transform .25s var(--cv-ease), background-color .25s ease; }
.cv-btn > i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cv-btn:hover, .cv-btn:focus-visible { text-decoration: none; }
.cv-btn:hover { background: #edf1f8; }
.cv-btn:hover > i { transform: translateX(2px) scale(1.06); }
.cv-btn--accent { background: var(--cv-accent); color: #fff; }
.cv-btn--accent > i { background: #fff; color: var(--cv-accent); }
.cv-btn--accent:hover { background: var(--cv-accent-d); }
.cv-btn--dark { background: var(--cv-ink); color: #fff; }
.cv-btn--dark > i { background: #fff; color: var(--cv-ink); }
.cv-btn--dark:hover { background: #1b2a47; }
.cv-btn--ghost { background: transparent; border-color: var(--cv-line-2); color: var(--cv-ink); }
.cv-btn--ghost > i { background: var(--cv-surface-2); color: var(--cv-ink); }
.cv-btn--ghost:hover { background: rgba(10, 20, 40, .04); border-color: rgba(10, 20, 40, .4); }
.cv-dark .cv-btn--ghost, .cv-btn--ghost.is-dark { border-color: rgba(255, 255, 255, .28); color: #fff; }
.cv-dark .cv-btn--ghost > i, .cv-btn--ghost.is-dark > i { background: rgba(255, 255, 255, .14); color: #fff; }
.cv-dark .cv-btn--ghost:hover, .cv-btn--ghost.is-dark:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
.cv-btn:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 3px; }

/* ---------- Tiles and grids ---------- */
.cv-tile { box-sizing: border-box; padding: 26px; border: 1px solid var(--cv-line); border-radius: var(--cv-r-tile); background: #fff; }
.cv-tile--dark { border-color: var(--cv-line-dark); background: var(--cv-dark-2); color: #fff; }
.cv-grid { display: grid; gap: var(--cv-gap); }
.cv-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cv-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .cv-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cv-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .cv-grid { gap: 12px; } .cv-grid-2, .cv-grid-3, .cv-grid-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Reveal on scroll (once). Content stays visible without script. ---------- */
.cv-js .cv-reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--cv-ease), transform .9s var(--cv-ease); transition-delay: calc(var(--cv-i, 0) * 90ms); }
.cv-js .cv-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cv-js .cv-reveal { opacity: 1; transform: none; transition: none; } }