/* =========================================================================
 * Brand North — Components
 * Buttons, cards, pills, forms, badges, marquee.
 * ========================================================================= */

/* ---------- Buttons ------------------------------------------------------ */
.bn-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-5);
  border-radius: var(--radius-pill);
  border: var(--border-1) solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart),
    transform var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart);
}

.bn-btn:active { transform: translateY(0); }
.bn-btn[disabled],
.bn-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.bn-btn--sm { padding: 10px var(--space-4); font-size: var(--fs-body-s); }
.bn-btn--lg { padding: 18px var(--space-6); font-size: var(--fs-body-l); }

/* Primary (CTA — ember) */
.bn-btn--primary {
  background-color: var(--bn-ember);
  color: var(--bn-bone);
  border-color: var(--bn-ember);
}

.bn-btn--primary:hover {
  background-color: var(--bn-ember-hover);
  border-color: var(--bn-ember-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-ember-glow);
}

.bn-btn--primary:focus-visible {
  box-shadow: var(--bn-focus-ring), 0 0 24px rgba(229, 103, 60, 0.32);
}

/* Secondary (outline) */
.bn-btn--secondary {
  background-color: transparent;
  color: var(--bn-text-primary);
  border-color: var(--bn-border-strong);
}

.bn-btn--secondary:hover {
  border-color: var(--bn-bone);
  background-color: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

[data-theme="light"] .bn-btn--secondary:hover {
  background-color: rgba(14, 14, 16, 0.04);
}

/* Ghost (text link) */
.bn-btn--ghost {
  background-color: transparent;
  color: var(--bn-text-primary);
  border-color: transparent;
  padding-inline: var(--space-2);
  position: relative;
}

.bn-btn--ghost::after {
  content: '';
  position: absolute;
  inset-block-end: 6px;
  inset-inline: var(--space-2);
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

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

.bn-btn--ghost:hover::after {
  transform: scaleX(1);
  background-color: var(--bn-accent);
}

/* Arrow icon inside button */
.bn-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

.bn-btn__arrow svg {
  width: 100%;
  height: 100%;
}

.bn-btn:hover .bn-btn__arrow { transform: translateX(2px); }

/* ---------- Status / Live pill ------------------------------------------ */
.bn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1;
}

.bn-pill__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

.bn-pill--live {
  background-color: var(--bn-live-tint);
  border: 1px solid var(--bn-live-border);
  color: var(--bn-sage);
}

.bn-pill--live .bn-pill__dot {
  animation: bn-pulse 2s var(--ease-in-out) infinite;
}

.bn-pill--positive {
  background-color: rgba(95, 139, 110, 0.08);
  border: 1px solid rgba(95, 139, 110, 0.24);
  color: var(--bn-sage);
}

.bn-pill--neutral {
  background-color: var(--bn-accent-tint);
  border: 1px solid rgba(229, 103, 60, 0.24);
  color: var(--bn-ember);
}

@keyframes bn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.92); }
}

/* ---------- Chip (audience selector, service tag) ----------------------- */
.bn-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--bn-border-default);
  background-color: transparent;
  color: var(--bn-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart);
}

.bn-chip:hover,
.bn-chip:focus-visible {
  color: var(--bn-text-primary);
  border-color: var(--bn-border-strong);
}

.bn-chip[aria-pressed="true"],
.bn-chip--active {
  background-color: var(--bn-accent);
  border-color: var(--bn-accent);
  color: var(--bn-bone);
}

/* Mono chip (used in service cards: HIPAA-safe, Server-side, etc.) */
.bn-chip-mono {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bn-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bn-text-secondary);
  line-height: 1.5;
}

[data-theme="light"] .bn-chip-mono {
  background-color: rgba(14, 14, 16, 0.04);
}

/* ---------- Card --------------------------------------------------------- */
.bn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background-color: var(--bn-bg-elevated);
  border: 1px solid var(--bn-border-subtle);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur-base) var(--ease-out-quart);
}

.bn-card:hover {
  border-color: var(--bn-border-strong);
}

.bn-card--linkable {
  cursor: pointer;
}

.bn-card--linkable:focus-within {
  outline: none;
  box-shadow: var(--bn-focus-ring);
}

.bn-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bn-text-mono-label);
  margin-bottom: var(--space-3);
}

.bn-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-5);
  color: var(--bn-text-primary);
}

.bn-card__icon svg { width: 100%; height: 100%; }

.bn-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-3);
}

.bn-card__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--bn-text-secondary);
  flex-grow: 1;
}

.bn-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.bn-card__arrow {
  align-self: flex-end;
  margin-top: var(--space-5);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background-color: var(--bn-accent-tint);
  color: var(--bn-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease-out-quart),
              transform var(--dur-fast) var(--ease-out-quart);
}

.bn-card__arrow svg {
  width: 14px;
  height: 14px;
}

.bn-card:hover .bn-card__arrow {
  background-color: var(--bn-accent);
  color: var(--bn-bone);
  transform: translateX(2px);
}

/* ---------- Forms -------------------------------------------------------- */
.bn-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bn-field__label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: var(--bn-text-secondary);
  letter-spacing: -0.005em;
}

.bn-input,
.bn-textarea,
.bn-select {
  width: 100%;
  padding: 14px var(--space-4);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bn-border-default);
  border-radius: var(--radius-md);
  color: var(--bn-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  transition:
    background-color var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart);
}

[data-theme="light"] .bn-input,
[data-theme="light"] .bn-textarea,
[data-theme="light"] .bn-select {
  background-color: rgba(14, 14, 16, 0.03);
}

.bn-input::placeholder,
.bn-textarea::placeholder {
  color: var(--bn-text-tertiary);
}

.bn-input:focus-visible,
.bn-textarea:focus-visible,
.bn-select:focus-visible {
  outline: none;
  border-color: var(--bn-ember);
  box-shadow: 0 0 0 2px rgba(229, 103, 60, 0.32);
}

.bn-input[aria-invalid="true"],
.bn-textarea[aria-invalid="true"] {
  border-color: var(--bn-danger);
}

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

/* ---------- Marquee ----------------------------------------------------- */
.bn-marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--bn-border-subtle);
  padding-block: var(--space-5);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.bn-marquee__track {
  display: flex;
  width: max-content;
  animation: bn-marquee-scroll 60s linear infinite;
}

.bn-marquee:hover .bn-marquee__track {
  animation-play-state: paused;
}

.bn-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  padding-right: var(--space-7);
  font-family: var(--font-display);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-medium);
  letter-spacing: -0.005em;
  color: var(--bn-text-secondary);
  white-space: nowrap;
}

.bn-marquee__item::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--bn-accent);
  border-radius: 2px;
  transform: rotate(45deg);
  margin-left: var(--space-5);
}

@keyframes bn-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Stat block (hero proof / counters) -------------------------- */
.bn-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bn-stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  line-height: 1;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--bn-text-primary);
  font-variant-numeric: tabular-nums;
}

.bn-stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bn-text-mono-label);
}

/* ---------- Live timestamp ---------------------------------------------- */
.bn-live-timestamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bn-text-secondary);
}

.bn-live-timestamp__value {
  color: var(--bn-text-primary);
  font-weight: var(--fw-medium);
}

.bn-live-timestamp::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--bn-sage);
  animation: bn-pulse 2s var(--ease-in-out) infinite;
}

/* ---------- Comparison list (Most Agencies vs Brand North) -------------- */
.bn-compare-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bn-compare-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--bn-text-primary);
}

.bn-compare-list__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.bn-compare-list__icon svg {
  width: 12px;
  height: 12px;
}

.bn-compare-list__item--neg .bn-compare-list__icon {
  background-color: rgba(255, 92, 92, 0.12);
  color: var(--bn-danger);
}

.bn-compare-list__item--pos .bn-compare-list__icon {
  background-color: rgba(95, 139, 110, 0.12);
  color: var(--bn-sage);
}

/* ---------- FAQ accordion ----------------------------------------------- */
.bn-faq {
  border-top: 1px solid var(--bn-border-subtle);
}

.bn-faq__item {
  border-bottom: 1px solid var(--bn-border-subtle);
}

.bn-faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--bn-text-primary);
  letter-spacing: -0.005em;
  cursor: pointer;
}

.bn-faq__trigger:hover { color: var(--bn-accent); }

.bn-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-out-quart);
}

.bn-faq__icon svg {
  width: 100%;
  height: 100%;
}

.bn-faq__item[aria-expanded="true"] .bn-faq__icon { transform: rotate(45deg); color: var(--bn-accent); }

.bn-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-medium) var(--ease-out-quart);
}

.bn-faq__panel > div {
  overflow: hidden;
}

.bn-faq__item[aria-expanded="true"] .bn-faq__panel {
  grid-template-rows: 1fr;
}

.bn-faq__body {
  padding-bottom: var(--space-6);
  padding-right: var(--space-6);
  color: var(--bn-text-secondary);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
}