@import url("/static/css/brand-palette.css?v=20261017");

/* Beauty Bee analytics dashboards and consent controls. */

.bb-analytics-root {
  --bb-a-ink: var(--bb-charcoal);
  --bb-a-muted: var(--bb-muted);
  --bb-a-line: rgba(var(--bb-ink-rgb), .15);
  --bb-a-surface: var(--bb-pearl);
  --bb-a-soft: var(--bb-blush);
  --bb-a-sky: var(--bb-powder);
  --bb-a-pink: var(--bb-blush);
  --bb-a-honey: var(--bb-teal);
  --bb-a-green: #4d8d69;
  color: var(--bb-a-ink);
}

.bb-analytics-heading { align-items: flex-end; }
.bb-period-control { display: grid; flex: 0 0 180px; gap: 6px; color: var(--bb-charcoal); font-size: 11px; font-weight: 800; }
.bb-period-control[hidden] { display: none !important; }
.bb-period-control span { text-transform: uppercase; letter-spacing: .08em; }
.bb-period-control small { color: var(--bb-muted); font-size: 10px; font-weight: 650; line-height: 1.35; }
.bb-period-control select {
  width: 100%;
  height: 43px;
  padding: 0 35px 0 12px;
  border: 1px solid rgba(var(--bb-ink-rgb), .22);
  border-radius: 12px;
  color: var(--bb-charcoal);
  background: var(--bb-pearl);
}

.bb-analytics-loading,
.bb-analytics-empty,
.bb-analytics-error {
  display: grid;
  min-height: 190px;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 30px;
  border: 1px solid var(--bb-a-line, rgba(var(--bb-ink-rgb), .15));
  border-radius: 22px;
  background: var(--bb-a-surface, var(--bb-pearl));
  text-align: center;
}
.bb-analytics-loading span { width: 28px; height: 28px; border: 3px solid rgba(var(--bb-ink-rgb), .12); border-top-color: var(--bb-teal); border-radius: 50%; animation: bb-analytics-spin .75s linear infinite; }
.bb-analytics-loading p,
.bb-analytics-empty p,
.bb-analytics-error p { max-width: 520px; margin: 0; color: var(--bb-a-muted, var(--bb-muted)); }
.bb-analytics-error strong { font-size: 18px; }
@keyframes bb-analytics-spin { to { transform: rotate(360deg); } }

.bb-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.bb-summary-grid--owner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bb-stat {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--bb-a-line);
  border-radius: 18px;
  background: var(--bb-a-surface);
  box-shadow: 0 10px 28px rgba(var(--bb-ink-rgb), .07);
}
.bb-stat:nth-child(4n + 1) { background: linear-gradient(145deg, var(--bb-pearl), var(--bb-powder)); }
.bb-stat:nth-child(4n + 2) { background: linear-gradient(145deg, var(--bb-pearl), var(--bb-blush)); }
.bb-stat:nth-child(4n + 3) { background: linear-gradient(145deg, var(--bb-pearl), var(--bb-powder)); }
.bb-stat:nth-child(4n + 4) { background: linear-gradient(145deg, var(--bb-pearl), var(--bb-blush)); }
.bb-stat span { display: block; overflow: hidden; margin-bottom: 8px; color: var(--bb-a-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.bb-stat strong { display: block; font-size: clamp(24px, 2.4vw, 35px); line-height: 1; letter-spacing: -.04em; }
.bb-stat small { display: block; margin-top: 8px; color: var(--bb-a-muted); font-size: 11px; line-height: 1.4; }
.bb-stat--live strong::before { display: inline-block; width: 9px; height: 9px; margin: 0 9px 3px 0; border-radius: 50%; background: #4faa73; box-shadow: 0 0 0 5px rgba(79,170,115,.14); content: ""; }

.bb-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bb-a-line);
  border-radius: 21px;
  background: var(--bb-a-surface);
  box-shadow: 0 12px 34px rgba(var(--bb-ink-rgb), .07);
}
.bb-card + .bb-card { margin-top: 18px; }
.bb-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 23px 16px; }
.bb-card__header h3 { margin: 3px 0 4px; font-size: 20px; line-height: 1.15; }
.bb-card__header p { max-width: 660px; margin: 0; color: var(--bb-a-muted); font-size: 12px; line-height: 1.5; }
.bb-card__eyebrow { display: block; color: var(--bb-teal); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.bb-card__body { padding: 0 23px 23px; }

.bb-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 23px 23px; }
.bb-performance-card { padding: 22px; border: 1px solid var(--bb-a-line); border-radius: 18px; background: var(--bb-pearl); }
.bb-performance-card--bee { border-color: rgba(54,137,176,.28); background: linear-gradient(145deg, var(--bb-powder), var(--bb-powder)); }
.bb-performance-card--other { border-color: rgba(207,112,118,.24); background: linear-gradient(145deg, var(--bb-pearl), var(--bb-blush)); }
.bb-performance-card__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bb-performance-card__title h3 { margin: 0; font-size: 18px; }
.bb-origin-pill,
.bb-status-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; font-size: 9px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.bb-origin-pill--bee { color: var(--bb-teal); background: rgba(54,137,176,.15); }
.bb-origin-pill--other { color: #98545a; background: rgba(207,112,118,.14); }
.bb-performance-main { margin: 19px 0 16px; }
.bb-performance-main strong { display: block; font-size: clamp(34px, 4vw, 51px); line-height: .95; letter-spacing: -.055em; }
.bb-performance-main span { display: block; margin-top: 7px; color: var(--bb-a-muted); font-size: 11px; }
.bb-performance-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.bb-performance-kpis div { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.58); }
.bb-performance-kpis span { display: block; color: var(--bb-a-muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.bb-performance-kpis strong { display: block; margin-top: 4px; font-size: 16px; }
.bb-lift-note { margin: -8px 23px 22px; padding: 12px 15px; border-radius: 13px; color: var(--bb-charcoal); background: var(--bb-powder); font-size: 12px; line-height: 1.5; }
.bb-lift-note strong { color: var(--bb-teal); }

.bb-table-wrap { overflow-x: auto; border-top: 1px solid var(--bb-a-line); }
.bb-table-wrap:focus-visible { outline: 3px solid rgba(78,159,196,.35); outline-offset: -3px; }
.bb-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bb-table th { padding: 11px 15px; color: var(--bb-a-muted); background: rgba(var(--bb-ink-rgb), .035); font-size: 9px; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.bb-table td { padding: 14px 15px; border-top: 1px solid rgba(var(--bb-ink-rgb), .08); vertical-align: middle; white-space: nowrap; }
.bb-table tbody tr:hover td { background: rgba(130,201,232,.09); }
.bb-table__primary { display: block; max-width: 260px; overflow: hidden; font-weight: 800; text-overflow: ellipsis; }
.bb-table__secondary { display: block; margin-top: 3px; color: var(--bb-a-muted); font-size: 10px; text-transform: capitalize; }
.bb-table__empty { padding: 35px !important; color: var(--bb-a-muted); text-align: center; white-space: normal !important; }
.bb-post-details { max-width: 360px; margin-top: 9px; color: var(--bb-a-ink); white-space: normal; }
.bb-post-details summary { width: max-content; max-width: 100%; color: var(--bb-teal); font-size: 10px; font-weight: 850; cursor: pointer; }
.bb-post-details summary:focus-visible { outline: 3px solid rgba(78,159,196,.3); outline-offset: 2px; }
.bb-post-details__grid { display: grid; grid-template-columns: repeat(2, minmax(125px, 1fr)); gap: 7px; margin: 9px 0 0; padding: 10px; border: 1px solid rgba(78,159,196,.18); border-radius: 11px; background: rgba(255,255,255,.6); }
.bb-post-details__grid div { min-width: 0; }
.bb-post-details__grid dt { color: var(--bb-a-muted); font-size: 9px; font-weight: 750; line-height: 1.3; }
.bb-post-details__grid dd { margin: 2px 0 0; font-size: 10px; font-weight: 800; line-height: 1.35; }

.bb-analytics-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--bb-teal); border-radius: 12px; color: var(--bb-white); background: var(--bb-teal); font-size: 11px; font-weight: 850; cursor: pointer; }
.bb-analytics-button:hover:not(:disabled) { background: var(--bb-teal-hover); }
.bb-analytics-button:disabled { opacity: .55; cursor: not-allowed; }
.bb-analytics-button--secondary { color: var(--bb-charcoal); border-color: rgba(var(--bb-ink-rgb), .2); background: var(--bb-pearl); }

.bb-range-note { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 15px 17px; border: 1px solid rgba(78,159,196,.22); border-radius: 16px; background: var(--bb-powder); }
.bb-range-note strong,
.bb-range-note span { display: block; }
.bb-range-note strong { font-size: 13px; }
.bb-range-note span { margin-top: 3px; color: var(--bb-a-muted); font-size: 11px; line-height: 1.45; }
.bb-range-note .bb-analytics-button { flex: 0 0 auto; }

.bb-customer-connection-hub { margin-bottom: 18px; }
.bb-connection-group { padding-top: 2px; border-top: 1px solid var(--bb-a-line); }
.bb-connection-group + .bb-connection-group { margin-top: 4px; }
.bb-connection-group__header { padding: 17px 23px 12px; }
.bb-connection-group__header h4 { margin: 0; font-size: 15px; }
.bb-connection-group__header p { margin: 4px 0 0; color: var(--bb-a-muted); font-size: 12px; line-height: 1.45; }
.bb-connection-empty { margin: 0 23px 23px; padding: 17px; border: 1px solid rgba(78,159,196,.2); border-radius: 14px; background: var(--bb-powder); }
.bb-connection-empty--compact { margin-bottom: 18px; }
.bb-connection-empty strong,
.bb-connection-empty p { display: block; }
.bb-connection-empty strong { font-size: 13px; }
.bb-connection-empty p { margin: 4px 0 0; color: var(--bb-a-muted); font-size: 12px; line-height: 1.5; }
.bb-customer-results-empty { display: flex; min-height: 130px; align-items: center; justify-content: center; gap: 13px; padding: 25px; border: 1px solid var(--bb-a-line); border-radius: 19px; background: var(--bb-a-surface); text-align: left; }
.bb-customer-results-empty strong { display: block; font-size: 16px; }
.bb-customer-results-empty p { max-width: 560px; margin: 5px 0 0; color: var(--bb-a-muted); font-size: 12px; line-height: 1.5; }

.bb-connection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; padding: 0 23px 23px; }
.bb-connection-grid--customer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-connection-card { padding: 16px; border: 1px solid var(--bb-a-line); border-radius: 15px; background: var(--bb-pearl); }
.bb-connection-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bb-connection-card h4 { min-width: 0; margin: 0; font-size: 14px; line-height: 1.3; }
.bb-connection-card p { margin: 10px 0 0; color: var(--bb-a-muted); font-size: 10px; line-height: 1.5; }
.bb-status-pill { color: #81540f; background: #ffedba; white-space: nowrap; }
.bb-status-pill--idle { color: var(--bb-muted); background: rgba(var(--bb-ink-rgb), .08); }
.bb-status-pill--syncing { color: var(--bb-teal); background: rgba(78,159,196,.16); }
.bb-status-pill--connected { color: #2f6e4c; background: rgba(79,170,115,.16); }
.bb-status-pill--error { color: #943c45; background: #ffe1e4; }
.bb-status-pill--warning { color: #81540f; background: #ffedba; }
.bb-status-pill--unavailable { color: var(--bb-muted); background: rgba(var(--bb-ink-rgb), .08); }
.bb-connection-card--customer { min-height: 176px; }
.bb-connection-card--customer p { font-size: 12px; }
.bb-connection-card--error { border-color: rgba(165,65,73,.32); background: #fff7f7; }
.bb-connection-card--connected { border-color: rgba(79,170,115,.28); background: #f7fcf8; }
.bb-connection-card--syncing { border-color: rgba(78,159,196,.28); background: #f4fbfe; }
.bb-connection-card--unavailable { background: rgba(var(--bb-pearl-rgb), .72); }
.bb-connection-card .bb-connection-account { color: var(--bb-a-ink); font-weight: 850; }
.bb-connection-card .bb-connection-sync-time { margin-top: 6px; font-size: 11px; }
.bb-connection-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.bb-connection-action { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 13px; border: 1px solid var(--bb-teal); border-radius: 11px; color: var(--bb-white); background: var(--bb-teal); font-size: 12px; font-weight: 850; text-decoration: none; }
.bb-connection-action:hover { background: var(--bb-teal-hover); }
.bb-connection-action:focus-visible { outline: 3px solid rgba(78,159,196,.32); outline-offset: 2px; }
.bb-connection-action--secondary { color: var(--bb-charcoal); border-color: rgba(var(--bb-ink-rgb), .2); background: var(--bb-pearl); }
.bb-connection-spinner { display: inline-block; width: 13px; height: 13px; flex: 0 0 13px; margin-right: 6px; border: 2px solid rgba(36,92,118,.2); border-top-color: var(--bb-teal); border-radius: 50%; animation: bb-analytics-spin .75s linear infinite; }
.bb-example-entry { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 18px; border: 1px solid var(--bb-a-line); border-radius: 17px; background: var(--bb-a-surface); }
.bb-example-entry strong { display: block; font-size: 15px; }
.bb-example-entry p { margin: 5px 0 0; color: var(--bb-a-muted); font-size: 12px; line-height: 1.5; }
.bb-example-entry a { flex: 0 0 auto; text-decoration: none; }
.bb-example-teaser { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto; align-items: center; gap: 18px; margin: 0 23px 22px; padding: 18px; border: 1px solid rgba(200,132,29,.34); border-radius: 17px; background: linear-gradient(135deg, var(--bb-blush), var(--bb-powder)); box-shadow: 0 9px 24px rgba(var(--bb-ink-rgb), .06); }
.bb-example-teaser__copy h4 { margin: 6px 0 0; font-size: 17px; line-height: 1.3; }
.bb-example-teaser__copy p { max-width: 560px; margin: 5px 0 0; color: var(--bb-a-muted); font-size: 12px; line-height: 1.5; }
.bb-example-label { display: block; color: #81540f; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.bb-example-teaser__results { display: grid; grid-template-columns: repeat(3, minmax(76px, auto)); gap: 8px; }
.bb-example-teaser__results div { padding: 10px 11px; border: 1px solid rgba(var(--bb-ink-rgb), .08); border-radius: 12px; background: rgba(255,255,255,.7); }
.bb-example-teaser__results strong,
.bb-example-teaser__results span { display: block; }
.bb-example-teaser__results strong { font-size: 15px; line-height: 1.2; }
.bb-example-teaser__results span { margin-top: 3px; color: var(--bb-a-muted); font-size: 9px; font-weight: 750; white-space: nowrap; }
.bb-demo-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 15px 17px; border: 2px solid var(--bb-teal); border-radius: 16px; background: var(--bb-powder); }
.bb-demo-banner strong,
.bb-demo-banner p { display: block; }
.bb-demo-banner strong { margin-top: 6px; font-size: 14px; }
.bb-demo-banner p { margin: 4px 0 0; color: var(--bb-a-muted); font-size: 12px; line-height: 1.45; }
.bb-demo-banner a { flex: 0 0 auto; color: #70470d; font-size: 12px; font-weight: 850; }
.bb-impact-story { background: linear-gradient(145deg, var(--bb-pearl), var(--bb-powder)); }
.bb-impact-graph { display: grid; gap: 14px; padding: 2px 23px 18px; }
.bb-impact-row { display: grid; grid-template-columns: minmax(175px, .7fr) minmax(160px, 1.3fr) minmax(180px, .8fr); align-items: center; gap: 14px; }
.bb-impact-row__label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bb-impact-row__label span { color: var(--bb-a-muted); font-size: 12px; font-weight: 800; }
.bb-impact-row__label strong { font-size: 17px; }
.bb-impact-track,
.bb-comparison-track { height: 11px; overflow: hidden; border-radius: 999px; background: rgba(var(--bb-ink-rgb), .08); }
.bb-impact-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bb-teal), var(--bb-blush)); }
.bb-impact-row small { color: var(--bb-a-muted); font-size: 11px; line-height: 1.35; }
.bb-impact-empty { margin: 0 23px 23px; padding: 18px; border-radius: 14px; color: var(--bb-a-muted); background: rgba(255,255,255,.58); font-size: 12px; }
.bb-chart-note { margin: 0 23px 22px; padding-top: 13px; border-top: 1px solid var(--bb-a-line); color: var(--bb-a-muted); font-size: 11px; line-height: 1.5; }
.bb-comparison-chart { display: grid; gap: 16px; padding: 2px 23px 18px; }
.bb-comparison-row { padding: 14px; border: 1px solid rgba(var(--bb-ink-rgb), .1); border-radius: 14px; background: rgba(255,255,255,.5); }
.bb-comparison-row h4 { margin: 0 0 11px; font-size: 13px; }
.bb-comparison-series { display: grid; grid-template-columns: 110px 74px minmax(120px, 1fr); align-items: center; gap: 10px; }
.bb-comparison-series + .bb-comparison-series { margin-top: 8px; }
.bb-comparison-series > span { color: var(--bb-a-muted); font-size: 11px; font-weight: 800; }
.bb-comparison-series > strong { font-size: 12px; text-align: right; }
.bb-comparison-fill { display: block; height: 100%; border-radius: inherit; }
.bb-comparison-fill--bee { background: var(--bb-teal); }
.bb-comparison-fill--other { background: var(--bb-blush); }
.bb-normalized-comparison + .bb-summary-grid { margin-top: 18px; }

.customer-app .bb-card__header p { font-size: 13px; }
.customer-app .bb-analytics-button { font-size: 12px; }
.customer-app .bb-table { font-size: 13px; }
.customer-app .bb-table th { font-size: 11px; }
.customer-app .bb-table__secondary { font-size: 12px; }
.customer-app .bb-post-details summary,
.customer-app .bb-post-details__grid dd { font-size: 11px; }
.customer-app .bb-post-details__grid dt { font-size: 10px; }
.customer-app .bb-performance-kpis span { font-size: 11px; line-height: 1.25; }
.customer-app .bb-origin-pill,
.customer-app .bb-status-pill { font-size: 11px; }

.bb-owner-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 18px; margin-top: 18px; }
.bb-daily-chart { display: flex; min-height: 220px; align-items: flex-end; gap: clamp(4px, .8vw, 10px); padding: 16px 23px 23px; border-top: 1px solid var(--bb-a-line); }
.bb-daily-bar { display: grid; min-width: 0; height: 180px; flex: 1; grid-template-rows: 1fr auto; gap: 7px; align-items: end; }
.bb-daily-bar__track { display: flex; height: 100%; align-items: flex-end; border-radius: 8px; background: rgba(130,201,232,.12); }
.bb-daily-bar__fill { width: 100%; min-height: 3px; border-radius: 8px; background: linear-gradient(180deg, var(--bb-powder), var(--bb-teal)); }
.bb-daily-bar small { overflow: hidden; color: var(--bb-a-muted); font-size: 8px; text-align: center; text-overflow: clip; }
.bb-source-list,
.bb-funnel-list { display: grid; gap: 12px; padding: 2px 23px 23px; }
.bb-source-row__line,
.bb-funnel-row__line { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 6px; font-size: 11px; }
.bb-source-row__line span,
.bb-funnel-row__line span { overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.bb-source-row__track,
.bb-funnel-row__track { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(var(--bb-ink-rgb), .08); }
.bb-source-row__track span { display: block; height: 100%; border-radius: inherit; background: var(--bb-powder); }
.bb-funnel-row__track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--bb-blush), var(--bb-teal)); }
.bb-realtime-note { display: flex; align-items: center; gap: 8px; color: var(--bb-a-muted); font-size: 11px; }
.bb-realtime-note::before { width: 8px; height: 8px; border-radius: 50%; background: #4faa73; box-shadow: 0 0 0 4px rgba(79,170,115,.13); content: ""; }
.bb-measurement-note { margin: 15px 0 0; color: var(--bb-a-muted); font-size: 10px; line-height: 1.55; }

/* The studio ends in a light themed layer, so shared analytics stays legible. */
.bb-analytics-root--owner { --bb-a-surface: rgba(var(--bb-pearl-rgb), .95); --bb-a-soft: var(--bb-blush); }
.bb-period-control--studio { color: var(--bb-charcoal); }

/* Consent and persistent privacy controls. */
.bb-privacy-trigger {
  position: fixed;
  z-index: 8990;
  bottom: 14px;
  left: 14px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(var(--bb-ink-rgb), .22);
  border-radius: 999px;
  color: var(--bb-charcoal);
  background: rgba(var(--bb-pearl-rgb), .96);
  box-shadow: 0 8px 24px rgba(var(--bb-ink-rgb), .14);
  font: 750 11px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
.bb-privacy-trigger:hover { background: #fff; }
.bb-consent,
.bb-consent * { box-sizing: border-box; }
.bb-consent { position: fixed; z-index: 9000; inset: 0; display: grid; place-items: end center; padding: 18px; background: rgba(35,25,21,.38); backdrop-filter: blur(4px); }
.bb-consent.is-hidden { display: none !important; }
.bb-consent__card { width: min(760px, 100%); max-height: min(90vh, 720px); padding: 24px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(var(--bb-ink-rgb), .18); border-radius: 24px; color: var(--bb-charcoal); background: var(--bb-pearl); box-shadow: 0 28px 90px rgba(34,20,14,.28); font-family: Arial, Helvetica, sans-serif; }
.bb-consent__intro { display: flex; align-items: center; gap: 13px; }
.bb-consent__bee { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 15px; color: var(--bb-charcoal); background: var(--bb-blush); font-size: 17px; font-weight: 900; }
.bb-consent__eyebrow { margin: 0 0 3px; color: var(--bb-teal); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.bb-consent h2 { margin: 0; color: var(--bb-charcoal); font-family: Arial, Helvetica, sans-serif; font-size: clamp(20px, 3vw, 27px); line-height: 1.1; }
.bb-consent__copy { margin: 15px 0; color: var(--bb-muted); font-size: 12px; line-height: 1.55; }
.bb-consent__signal,
.bb-consent__error { margin: 12px 0; padding: 10px 12px; border-radius: 10px; font-size: 11px; line-height: 1.45; }
.bb-consent__signal { margin: 10px 0; padding: 8px 10px; color: var(--bb-muted); background: var(--bb-powder); }
.bb-consent__error { color: #8e343d; background: #ffe1e4; }
.bb-consent__details { display: grid; gap: 9px; margin: 16px 0; }
.bb-consent__details.is-hidden,
.bb-consent__signal.is-hidden,
.bb-consent__error.is-hidden,
.bb-consent__actions.is-hidden { display: none !important; }
.bb-consent-option { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 14px; border: 1px solid rgba(var(--bb-ink-rgb), .13); border-radius: 13px; background: var(--bb-pearl); cursor: pointer; }
.bb-consent-option--locked { opacity: .72; cursor: default; }
.bb-consent-option strong,
.bb-consent-option small { display: block; }
.bb-consent-option strong { font-size: 12px; }
.bb-consent-option small { margin-top: 3px; color: var(--bb-muted); font-size: 10px; line-height: 1.4; }
.bb-consent-option input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--bb-teal); }
.bb-consent__actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bb-consent-button { min-height: 39px; padding: 0 14px; border: 1px solid rgba(var(--bb-ink-rgb), .2); border-radius: 11px; color: var(--bb-charcoal); background: var(--bb-pearl); font-size: 11px; font-weight: 850; cursor: pointer; }
.bb-consent-button--primary { color: var(--bb-white); border-color: var(--bb-teal); background: var(--bb-teal); }
.bb-consent-link { min-height: 36px; padding: 0 9px; border: 0; color: #70470d; background: transparent; font-size: 11px; font-weight: 800; text-decoration: underline; cursor: pointer; }
.bb-consent__legal { margin: 14px 0 0; color: var(--bb-muted); font-size: 10px; }
.bb-consent__legal a { color: inherit; text-decoration: underline; }

@media (max-width: 1050px) {
  .bb-summary-grid,
  .bb-summary-grid--owner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bb-connection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .bb-analytics-heading { display: block !important; }
  .bb-period-control { width: 100%; margin-top: 16px; }
  .bb-comparison-grid,
  .bb-owner-split { grid-template-columns: 1fr; }
  .bb-performance-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-card__header { padding: 18px 17px 14px; }
  .bb-card__body { padding-right: 17px; padding-left: 17px; }
  .bb-comparison-grid,
  .bb-connection-grid { padding-right: 17px; padding-left: 17px; }
  .bb-connection-group__header { padding-right: 17px; padding-left: 17px; }
  .bb-connection-empty,
  .bb-example-teaser { margin-right: 17px; margin-left: 17px; }
  .bb-example-teaser { grid-template-columns: 1fr; }
  .bb-example-teaser .bb-connection-action { justify-self: start; }
  .bb-impact-graph,
  .bb-comparison-chart { padding-right: 17px; padding-left: 17px; }
  .bb-impact-row { grid-template-columns: minmax(155px, .7fr) minmax(140px, 1.3fr); }
  .bb-impact-row small { grid-column: 1 / -1; }
  .bb-chart-note { margin-right: 17px; margin-left: 17px; }
  .bb-lift-note { margin-right: 17px; margin-left: 17px; }
  .bb-daily-chart { padding-right: 17px; padding-left: 17px; }
  .customer-app .bb-privacy-trigger { bottom: 78px; }
}

@media (max-width: 520px) {
  .bb-summary-grid,
  .bb-summary-grid--owner,
  .bb-connection-grid { grid-template-columns: 1fr; }
  .bb-stat { padding: 17px; }
  .bb-performance-kpis { gap: 6px; }
  .bb-performance-kpis div { padding: 8px; }
  .bb-post-details__grid { grid-template-columns: 1fr; }
  .bb-range-note { display: grid; }
  .bb-demo-banner { display: grid; }
  .bb-example-entry { display: grid; }
  .bb-demo-banner a { justify-self: start; }
  .bb-example-teaser__results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bb-example-teaser__results span { white-space: normal; }
  .bb-impact-row { grid-template-columns: 1fr; gap: 7px; }
  .bb-impact-row small { grid-column: auto; }
  .bb-comparison-series { grid-template-columns: minmax(90px, 1fr) auto; }
  .bb-comparison-track { grid-column: 1 / -1; }
  .bb-connection-action { width: 100%; }
  .bb-analytics-button { width: 100%; }
  .bb-consent { padding: 9px; }
  .bb-consent__card { padding: 19px 16px; border-radius: 19px; }
  .bb-consent__actions { display: grid; grid-template-columns: 1fr; }
  .bb-consent-button,
  .bb-consent-link { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bb-analytics-loading span,
  .bb-connection-spinner { animation: none; }
}

.bb-analytics-button:focus-visible, .bb-connection-action:focus-visible, .bb-consent-button:focus-visible, .bb-privacy-trigger:focus-visible { outline: 3px solid var(--bb-teal); outline-offset: 3px; }

.bb-analytics-button--secondary:hover:not(:disabled), .bb-connection-action--secondary:hover { color: var(--bb-charcoal); background: var(--bb-powder); }