/* BellerCreatives public-site shell, consolidated on bc-tokens.css. */
body {
  background: var(--bc-color-bg);
  color: var(--bc-color-text);
  font-family: var(--bc-font-sans);
  line-height: var(--bc-line-base);
  margin: var(--bc-space-0);
}

@media (prefers-color-scheme: dark) {
  body {
    background: var(--bc-color-bg);
    color: var(--bc-color-text);
  }
}

.bc-header {
  background: color-mix(in srgb, var(--bc-color-surface) 94%, transparent);
  border-bottom: var(--bc-border-width) solid var(--bc-color-border);
  position: sticky;
  top: var(--bc-space-0);
  z-index: var(--bc-z-header);
}

.bc-container,
.container {
  margin: var(--bc-space-0) auto;
  max-width: var(--bc-layout-xl);
  padding: var(--bc-space-0) var(--bc-space-6);
  width: 100%;
}

.bc-header .bc-container {
  max-width: none;
}

.bc-header-inner {
  align-items: center;
  display: flex;
  gap: var(--bc-space-5);
  justify-content: space-between;
  min-height: var(--bc-topbar-height);
}

.bc-logo {
  align-items: center;
  color: var(--bc-color-text);
  display: inline-flex;
  font-size: var(--bc-font-size-4);
  gap: var(--bc-space-2);
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.bc-logo::before {
  background: center / contain no-repeat url("/img/brand/bc-logo-author-mark.svg");
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  height: 2rem;
  width: 2rem;
}

.bc-logo span {
  color: var(--bc-color-accent);
}

.bc-nav {
  align-items: center;
  display: flex;
  gap: var(--bc-space-1);
  justify-content: flex-end;
  min-width: 0;
}

.bc-nav a {
  border-radius: var(--bc-radius-3);
  color: var(--bc-color-text-muted);
  font-size: var(--bc-font-size-1);
  font-weight: 700;
  line-height: var(--bc-line-tight);
  padding: var(--bc-space-2);
  text-decoration: none;
  transition:
    background-color var(--bc-duration-fast) var(--bc-ease-standard),
    color var(--bc-duration-fast) var(--bc-ease-standard);
}

.bc-nav a:hover,
.bc-nav a:focus-visible,
.bc-nav a.active {
  background: var(--bc-color-accent-soft);
  color: var(--bc-color-accent);
  outline: none;
}

.bc-footer,
footer {
  background: var(--bc-color-bg-alt);
  border-top: var(--bc-border-width) solid var(--bc-color-border);
  color: var(--bc-color-text-muted);
  padding: var(--bc-space-9) var(--bc-space-6);
  text-align: center;
}

.bc-footer a,
footer a {
  color: var(--bc-color-accent);
  font-weight: 700;
  text-decoration: none;
}

.bc-footer a:hover,
footer a:hover {
  color: var(--bc-color-accent-hover);
}

.hero,
.cta {
  background: var(--bc-gradient-cta);
  color: var(--bc-color-text);
  padding: var(--bc-space-11) var(--bc-space-6);
  text-align: center;
}

.section,
section {
  background: var(--bc-color-bg);
}

.section-title {
  color: var(--bc-color-text);
  font-size: var(--bc-font-size-6);
  line-height: var(--bc-line-tight);
}

.section-label {
  color: var(--bc-color-accent);
  font-size: var(--bc-font-size-0);
  font-weight: 900;
  letter-spacing: var(--bc-letter-caps);
  text-transform: uppercase;
}

.pillar-grid,
.persona-grid,
.tools-grid,
.pipeline-grid,
.trust-stats-grid {
  display: grid;
  gap: var(--bc-space-5);
}

.pillar-grid,
.persona-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tools-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pipeline-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.trust-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

input,
select,
textarea {
  font-family: var(--bc-font-sans);
}

@media (max-width: 900px) {
  .bc-container,
  .container {
    padding-left: var(--bc-space-4);
    padding-right: var(--bc-space-4);
  }

  .bc-header-inner {
    min-height: var(--bc-topbar-height);
  }

  .bc-nav {
    background: var(--bc-color-surface);
    border: var(--bc-border-width) solid var(--bc-color-border);
    border-radius: var(--bc-radius-3);
    box-shadow: var(--bc-shadow-md);
    display: none;
    flex-direction: column;
    left: var(--bc-space-4);
    padding: var(--bc-space-2);
    position: absolute;
    right: var(--bc-space-4);
    top: var(--bc-topbar-height);
  }

  .bc-nav.open,
  .bc-nav[data-open="true"] {
    display: flex;
  }

  .bc-nav a {
    padding: var(--bc-space-3) var(--bc-space-4);
  }

  .pillar-grid,
  .persona-grid,
  .tools-grid,
  .pipeline-grid,
  .trust-stats-grid {
    grid-template-columns: 1fr;
  }
}