/* devly.nl — one stylesheet for every page. The first half is the original
   homepage design (moved here unchanged from index.html); the second half is
   the brand blocks on the homepage and the brand pages, which use each brand's
   own colours and fonts, copied from the Musketier Solutions website and the
   Staurio and Quonai design tokens. */

/* ── Brand fonts, self-hosted (OFL) ── */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/sora-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}

:root {
  /* Musketier Solutions (musketiersolutions/designsystem tokens) */
  --mk-navy-950: #05101E;
  --mk-navy-900: #081423;
  --mk-navy-850: #0C1A2A;
  --mk-navy-800: #101E2D;
  --mk-navy-700: #1A2737;
  --mk-navy-600: #2E3946;
  --mk-steel: #9EA5AD;
  --mk-mist: #EFF2F5;
  --mk-emerald: #40C59B;
  --mk-emerald-soft: #B2E5D0;
  --mk-emerald-deep: #057558;

  /* Staurio, Graphite & Amber (staurio/crm tokens) */
  --st-graphite: #1F2733;
  --st-graphite-2: #2A3441;
  --st-line: #3A4453;
  --st-amber: #F59E0B;
  --st-amber-light: #FBBF24;
  --st-amber-link: #B45309;
  --st-ink: #F4F5F7;
  --st-muted: #AEB6C2;
  --st-note: #3D382D;

  /* Quonai, carbon theme (quonai/designsystem tokens) */
  --qn-carbon: #0C0F13;
  --qn-carbon-2: #15191D;
  --qn-line: #1E2328;
  --qn-line-2: #2F3338;
  --qn-cyan: #33D1E5;
  --qn-cyan-light: #85DCEA;
  --qn-cyan-deep: #0F7F90;
  --qn-ink: #ECEEF1;
  --qn-muted: #82878C;

  /* PulseComply (pulsecomply/pulse branding, colour palette v2.0: Blue 600 is
     the brand blue, Blue 200 the logo fill on dark, anthracite the surfaces;
     the light blue is a tint of Blue 600 that reads on anthracite) */
  --pc-anthracite-900: #0b0b0e;
  --pc-anthracite-800: #15151b;
  --pc-line: #26262e;
  --pc-blue-600: #2442d9;
  --pc-blue-700: #12239b;
  --pc-blue-200: #c2d4fd;
  --pc-blue-light: #7f93ff;
  --pc-ink: #f1f1f4;
  --pc-muted: #9b9ba8;

  --font-brand-display: 'Sora', 'Instrument Sans', sans-serif;
  --font-brand-mono: 'IBM Plex Mono', Consolas, ui-monospace, monospace;
  --font-quonai: 'Inter', 'Instrument Sans', sans-serif;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* A section reached by its anchor lands below the fixed navbar, not under it. */
section[id] {
  scroll-margin-top: 80px;
}

body {
  font-family: 'Manrope', sans-serif;
  color: #1a1a2e;
  background: #fff;
  line-height: 1.6;
}

/* ── Navigation ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 1.25rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s, box-shadow 0.3s;
}

nav.scrolled {
  background: rgba(10, 10, 30, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.nav-logo {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.5px;
}

.nav-logo span {
  color: #6c63ff;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: #fff;
}

.nav-cta {
  background: #6c63ff;
  color: #fff !important;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}

.nav-cta:hover {
  background: #5a52d5;
  transform: translateY(-1px);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ── Hero ── */
.hero {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url('/hero.jpg') center center / cover no-repeat;
  filter: blur(6px);
  transform: scale(1.05);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 30, 0.7) 0%,
    rgba(10, 10, 30, 0.5) 50%,
    rgba(10, 10, 30, 0.8) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 2rem;
}

.hero-brand {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -1.5px;
  margin-bottom: 0.75rem;
}

.hero-brand span {
  color: #6c63ff;
}

.hero-content h1 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 3.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  letter-spacing: -1px;
}

.hero-content h1 span {
  color: #6c63ff;
}

.hero-content p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px;
  margin: 0 auto 2rem;
  font-weight: 400;
}

.hero-btn {
  display: inline-block;
  background: #6c63ff;
  color: #fff;
  padding: 0.85rem 2.2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s;
}

.hero-btn:hover {
  background: #5a52d5;
  transform: translateY(-2px);
}

/* ── About Section ── */
.about {
  max-width: 760px;
  margin: 0 auto;
  padding: 5rem 2rem;
  text-align: center;
}

.about h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  letter-spacing: -0.5px;
}

.about p {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.8;
}

/* ── Contact Section ── */
.contact {
  background: #f7f7fb;
  padding: 5rem 2rem;
}

.contact-inner {
  max-width: 620px;
  margin: 0 auto;
}

.contact h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

.contact .subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 2.5rem;
  font-size: 1.05rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: #1a1a2e;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #6c63ff;
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.form-submit {
  width: 100%;
  padding: 0.9rem;
  background: #6c63ff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  margin-top: 0.5rem;
}

.form-submit:hover {
  background: #5a52d5;
  transform: translateY(-1px);
}

/* ── Footer ── */
footer {
  text-align: center;
  padding: 2rem;
  color: #767676;
  font-size: 0.85rem;
}

.footer-links {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: #666;
  text-decoration: none;
  margin: 0 0.6rem;
}

.footer-links a:hover {
  color: #6c63ff;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  nav {
    padding: 1rem 1.5rem;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(10, 10, 30, 0.97);
    flex-direction: column;
    padding: 1.5rem 2rem;
    gap: 1.2rem;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-hamburger {
    display: flex;
  }

  .hero-content h1 {
    font-size: 2.4rem;
  }

  .hero-content p {
    font-size: 1rem;
  }

  .about, .contact {
    padding: 3.5rem 1.5rem;
  }

  .about h2, .contact h2 {
    font-size: 1.8rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   The brands: the three blocks on the homepage, in each brand's own style
   (the same shape as the "Our brands" section of musketiersolutions.com)
   ══════════════════════════════════════════════════════════════════════ */

.eyebrow {
  display: block;
  font-family: var(--font-brand-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #6c63ff;
}

.brands {
  background: #0f0f2a;
  color: #fff;
  padding: 5.5rem 2rem;
}

.brands-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.brands-head {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}

/* The site purple reads 4.3:1 on this dark band; the lighter tint passes. */
.brands-head .eyebrow {
  color: #a9a4ff;
}

.brands h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0.75rem 0 1rem;
}

.brands-head p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
}

/* Four cards in a 2×2 grid, each about 600px at the section's full width:
   the width the cards of musketiersolutions.com were designed for, so the
   type and chips keep that site's sizes. One column under 900px. */
.brand-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 20px;
}

.brand--musketier {
  background: var(--mk-navy-850);
  border: 1px solid var(--mk-navy-700);
  color: var(--mk-mist);
}

.brand--staurio {
  background: var(--st-graphite);
  color: var(--st-ink);
}

.brand--quonai {
  background: var(--qn-carbon);
  border: 1px solid var(--qn-line);
  color: var(--qn-ink);
}

/* Logo on one line, the domain under it: the same shape on all three cards,
   whatever the width of the wordmark. */
.brand__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.brand__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 400;
}

.brand__icon {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

.brand__wordmark {
  height: 30px;
  width: auto;
}

.brand__mark {
  height: 44px;
  width: auto;
}

/* The Quonai wordmark is the word itself, as on quonai.com. */
.brand__logo--quonai {
  font-family: var(--font-quonai);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--qn-ink);
}

/* The Musketier wordmark: MUSKETIER in Sora, SOLUTIONS in mono spread to the
   same width, as the header of musketiersolutions.com builds it. */
.mk-wordmark {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mk-wordmark__name {
  margin-right: -0.2em;
  font-family: var(--font-brand-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--mk-mist);
}

.mk-wordmark__sub {
  display: flex;
  justify-content: space-between;
  padding: 0 0.11em 0 0.124em;
  font-family: var(--font-brand-mono);
  font-weight: 500;
  font-size: 9.5px;
  line-height: 1;
  color: var(--mk-emerald);
}

.brand__domain {
  padding: 4px 12px;
  border: 1px solid var(--st-line);
  border-radius: 999px;
  font-family: var(--font-brand-mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--st-muted);
}

.brand--musketier .brand__domain {
  border-color: var(--mk-navy-600);
  color: var(--mk-steel);
}

.brand--quonai .brand__domain {
  border-color: var(--qn-line-2);
  color: var(--qn-muted);
}

.brand__claim {
  margin-top: 28px;
  font-family: var(--font-brand-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  color: var(--st-amber);
}

.brand--musketier .brand__claim {
  color: var(--mk-emerald);
}

.brand--quonai .brand__claim {
  color: var(--qn-cyan);
}

.brand__text {
  margin-top: 12px;
  font-size: 17px;
  line-height: 27px;
  color: var(--st-muted);
}

.brand--musketier .brand__text {
  color: var(--mk-steel);
}

.brand--quonai .brand__text {
  color: var(--qn-muted);
}

.chips {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--st-graphite-2);
  font-size: 14px;
  line-height: 20px;
}

.brand--musketier .chip {
  background: var(--mk-navy-700);
}

.brand--quonai .chip {
  background: var(--qn-line);
}

.brand__note {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--st-note);
  font-size: 15px;
  line-height: 23px;
  color: var(--st-ink);
}

.brand--musketier .brand__note {
  background: var(--mk-navy-800);
  color: var(--mk-mist);
}

.brand__example {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--qn-carbon-2);
}

.brand__example-label {
  font-family: var(--font-brand-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--qn-muted);
}

.brand__example-q {
  margin-top: 10px;
  font-size: 15px;
  line-height: 23px;
  font-weight: 600;
  color: var(--qn-ink);
}

.brand__example-a {
  margin-top: 6px;
  font-size: 15px;
  line-height: 23px;
  color: var(--qn-ink);
}

.brand__example-src {
  margin-top: 10px;
  font-family: var(--font-brand-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--qn-cyan);
}

/* The button with the text link beside it, as on musketiersolutions.com. The
   pair fits on one line in every card from 1243px up; below that the link goes
   under the button on ALL cards (a width rule, never a text-length one), so two
   cards in one row never disagree and their buttons stay level. */
.brand__cta {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px 20px;
}

@media (max-width: 1242px) {
  .brand__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}

.btn-brand--musketier {
  background: var(--mk-emerald);
  color: var(--mk-navy-950);
}

.btn-brand--musketier:hover {
  background: var(--mk-emerald-soft);
}

.btn-brand--staurio {
  background: var(--st-amber);
  color: var(--st-graphite);
}

.btn-brand--staurio:hover {
  background: var(--st-amber-light);
}

.btn-brand--quonai {
  background: var(--qn-cyan);
  color: var(--qn-carbon);
}

.btn-brand--quonai:hover {
  background: var(--qn-cyan-light);
}

.brand__more {
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--st-amber);
}

.brand__more:hover {
  color: var(--st-amber-light);
}

.brand--musketier .brand__more {
  color: var(--mk-emerald);
}

.brand--musketier .brand__more:hover {
  color: var(--mk-emerald-soft);
}

.brand--quonai .brand__more {
  color: var(--qn-cyan);
}

.brand--quonai .brand__more:hover {
  color: var(--qn-cyan-light);
}

/* PulseComply: anthracite surface, the brand blue on the button, a light blue
   tint for the claim and the link. */
.brand--pulsecomply {
  background: var(--pc-anthracite-900);
  border: 1px solid var(--pc-line);
  color: var(--pc-ink);
}

.brand--pulsecomply .brand__domain {
  border-color: var(--pc-line);
  color: var(--pc-muted);
}

.brand--pulsecomply .brand__claim {
  color: var(--pc-blue-light);
}

.brand--pulsecomply .brand__text {
  color: var(--pc-muted);
}

.brand--pulsecomply .chip,
.brand--pulsecomply .brand__note {
  background: var(--pc-anthracite-800);
}

.brand--pulsecomply .brand__note {
  color: var(--pc-ink);
}

.btn-brand--pulsecomply {
  background: var(--pc-blue-600);
  color: #fff;
}

.btn-brand--pulsecomply:hover {
  background: var(--pc-blue-700);
}

.brand--pulsecomply .brand__more {
  color: var(--pc-blue-light);
}

.brand--pulsecomply .brand__more:hover {
  color: var(--pc-blue-200);
}

/* ══════════════════════════════════════════════════════════════════════
   The brand pages: one theme per brand through custom properties
   ══════════════════════════════════════════════════════════════════════ */

.page--musketier {
  --b-bg: var(--mk-navy-900);
  --b-bg-2: var(--mk-navy-800);
  --b-line: var(--mk-navy-600);
  --b-ink: var(--mk-mist);
  --b-muted: var(--mk-steel);
  --b-accent: var(--mk-emerald);
  --b-accent-light: var(--mk-emerald-soft);
  --b-accent-deep: var(--mk-emerald-deep);
  --b-on-accent: var(--mk-navy-950);
}

.page--staurio {
  --b-bg: var(--st-graphite);
  --b-bg-2: var(--st-graphite-2);
  --b-line: var(--st-line);
  --b-ink: var(--st-ink);
  --b-muted: var(--st-muted);
  --b-accent: var(--st-amber);
  --b-accent-light: var(--st-amber-light);
  --b-accent-deep: var(--st-amber-link);
  --b-on-accent: var(--st-graphite);
}

.page--quonai {
  --b-bg: var(--qn-carbon);
  --b-bg-2: var(--qn-carbon-2);
  --b-line: var(--qn-line-2);
  --b-ink: var(--qn-ink);
  --b-muted: var(--qn-muted);
  --b-accent: var(--qn-cyan);
  --b-accent-light: var(--qn-cyan-light);
  --b-accent-deep: var(--qn-cyan-deep);
  --b-on-accent: var(--qn-carbon);
}

.page--pulsecomply {
  --b-bg: var(--pc-anthracite-900);
  --b-bg-2: var(--pc-anthracite-800);
  --b-line: var(--pc-line);
  --b-ink: var(--pc-ink);
  --b-muted: var(--pc-muted);
  --b-accent: var(--pc-blue-light);
  --b-accent-light: var(--pc-blue-200);
  --b-accent-deep: var(--pc-blue-600);
  --b-on-accent: #fff;
  /* Pulse's own buttons are the brand blue with white text, not the tint. */
  --b-btn-bg: var(--pc-blue-600);
  --b-btn-hover: var(--pc-blue-700);
}

.bhero {
  position: relative;
  overflow: hidden;
  background: var(--b-bg);
  color: var(--b-ink);
  padding: 9rem 2rem 5rem;
}

/* The decorative ring the Musketier page heroes carry, in the brand's colour. */
.bhero::before,
.bhero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.35;
}

.bhero::before {
  right: -220px;
  top: -260px;
  width: 640px;
  height: 640px;
  border: 1px solid var(--b-accent);
}

.bhero::after {
  left: -260px;
  bottom: -420px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, var(--b-bg-2) 0%, transparent 70%);
}

.bhero-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.bhero__logo {
  margin-bottom: 2.25rem;
}

.bhero .eyebrow {
  color: var(--b-accent);
}

.bhero h1 {
  margin-top: 0.75rem;
  max-width: 820px;
  font-family: var(--font-brand-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.bhero h1 .accent {
  color: var(--b-accent);
}

.bhero__lead {
  margin-top: 1.25rem;
  max-width: 680px;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--b-muted);
}

.bhero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn-brand--page {
  background: var(--b-btn-bg, var(--b-accent));
  color: var(--b-on-accent);
}

.btn-brand--page:hover {
  background: var(--b-btn-hover, var(--b-accent-light));
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid var(--b-line);
  border-radius: 999px;
  color: var(--b-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s;
}

.btn-ghost:hover {
  border-color: var(--b-accent);
}

.bpage {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4.5rem 2rem 1rem;
}

.bsection + .bsection {
  margin-top: 4.5rem;
}

.bsection__head {
  max-width: 740px;
}

.bpage .eyebrow {
  color: var(--b-accent-deep);
}

.bpage h2 {
  margin: 0.6rem 0 0.75rem;
  font-family: var(--font-brand-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1a1a2e;
}

.bpage .lead {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #4C5663;
}

.bpage .lead--after {
  margin-top: 1.5rem;
}

/* Four facts fit on one row at the page width; narrower screens get two or one. */
.facts {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 16px;
}

.fact {
  padding: 20px 22px;
  border: 1px solid #e6e6ef;
  border-radius: 12px;
  background: #fff;
}

.fact__num {
  display: block;
  font-family: var(--font-brand-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--b-accent-deep);
}

.fact h3 {
  margin: 0.6rem 0 0.5rem;
  font-family: var(--font-brand-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
}

.fact p {
  font-size: 15px;
  line-height: 23px;
  color: #4C5663;
}

.fact a {
  color: var(--b-accent-deep);
  font-weight: 600;
}

/* A statement the brand itself makes, set apart. */
.bnote {
  margin-top: 2rem;
  max-width: 740px;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--b-accent);
  border-radius: 0 8px 8px 0;
  background: #f7f7fb;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #1a1a2e;
}

/* The Quonai example, the same block as on its card. */
.bexample {
  margin-top: 2rem;
  max-width: 640px;
  padding: 24px 28px;
  border-radius: 20px;
  background: var(--qn-carbon);
  color: var(--qn-ink);
}

.bexample .brand__example-q,
.bexample .brand__example-a {
  font-size: 16px;
  line-height: 24px;
}

.bcta {
  margin-top: 4.5rem;
  padding: 4.5rem 2rem;
  background: var(--b-bg);
  color: var(--b-ink);
  text-align: center;
}

.bcta h2 {
  font-family: var(--font-brand-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.02em;
}

.bcta p {
  max-width: 560px;
  margin: 0.75rem auto 0;
  color: var(--b-muted);
  line-height: 1.7;
}

.bcta .bhero__actions {
  justify-content: center;
}

@media (max-width: 768px) {
  .brands {
    padding: 3.5rem 1.5rem;
  }

  .brands h2 {
    font-size: 1.8rem;
  }

  .bhero {
    padding: 7rem 1.5rem 3.5rem;
  }

  .bpage {
    padding: 3rem 1.5rem 1rem;
  }

  .bsection + .bsection {
    margin-top: 3.25rem;
  }

  .bcta {
    margin-top: 3.25rem;
    padding: 3.5rem 1.5rem;
  }
}

/* Under 1024px one column: two columns would leave cards narrower than the
   460px the type and chips were designed for. */
@media (max-width: 1023px) {
  .brand-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A 320px phone: the longest button label does not fit on one line. */
@media (max-width: 480px) {
  .btn-brand {
    height: auto;
    min-height: 48px;
    padding: 12px 20px;
    white-space: normal;
    text-align: left;
  }
}