/*
 * BrandsTrack console styles.
 * Scoped to .bt-app / .bt-pricing so the plugin never restyles the host theme.
 */

.bt-app,
.bt-pricing,
.bt-auth {
	--bt-bg: #0E1526;
	--bt-surface: #16203A;
	--bt-surface-2: #202C4D;
	--bt-border: #212C48;
	--bt-border-strong: #2B3656;
	--bt-accent: #CD9B47;
	--bt-accent-bright: #E4C079;
	--bt-accent-ink: #241704;
	--bt-text: #F4F1E9;
	--bt-text-muted: #CBC6B8;
	--bt-text-faint: #8D93A8;
	--bt-pos: #34d399;
	--bt-neg: #CC6250;
	--bt-warn: #fbbf24;
	--bt-radius: 10px;
	--bt-radius-sm: 6px;
	--bt-gap: 20px;
	--bt-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	box-sizing: border-box;
	color: var(--bt-text);
	font-family: var(--bt-font);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.bt-app *,
.bt-app *::before,
.bt-app *::after,
.bt-pricing *,
.bt-pricing *::before,
.bt-pricing *::after,
.bt-auth *,
.bt-auth *::before,
.bt-auth *::after {
	box-sizing: inherit;
}

.bt-app {
	background: var(--bt-bg);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	padding: clamp(16px, 3vw, 32px);
}

/* ---------- Top bar ---------- */

.bt-app__bar {
	align-items: center;
	border-bottom: 1px solid var(--bt-border);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding-bottom: 16px;
}

.bt-app__identity {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
}

.bt-app__org {
	font-size: 1.25rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.bt-app__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------- Buttons ---------- */

.bt-btn {
	background: transparent;
	border: 1px solid var(--bt-border-strong);
	border-radius: var(--bt-radius-sm);
	color: var(--bt-text);
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 550;
	line-height: 1.3;
	padding: 9px 16px;
	text-decoration: none;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.bt-btn:hover,
.bt-btn:focus-visible {
	background: var(--bt-surface-2);
	border-color: var(--bt-accent);
	color: var(--bt-text);
}

.bt-btn--primary {
	background: var(--bt-accent);
	border-color: var(--bt-accent);
	color: var(--bt-accent-ink);
	font-weight: 650;
}

.bt-btn--primary:hover,
.bt-btn--primary:focus-visible {
	background: var(--bt-accent-bright);
	border-color: var(--bt-accent-bright);
	color: var(--bt-accent-ink);
}

.bt-btn--ghost {
	background: var(--bt-surface-2);
}

.bt-btn--lg {
	font-size: 1rem;
	padding: 12px 22px;
}

.bt-btn--sm {
	font-size: 0.8125rem;
	padding: 6px 12px;
}

.bt-btn--danger {
	border-color: #6f2c20;
	color: var(--bt-neg);
}

.bt-btn--danger:hover,
.bt-btn--danger:focus-visible {
	background: #2f130e;
	border-color: var(--bt-neg);
}

.bt-btn[disabled],
.bt-btn[aria-busy="true"] {
	cursor: progress;
	opacity: 0.6;
}

.bt-app :focus-visible,
.bt-pricing :focus-visible {
	outline: 2px solid var(--bt-accent);
	outline-offset: 2px;
}

/* ---------- Notices ---------- */

.bt-app__notice {
	border: 1px solid var(--bt-border-strong);
	border-left-width: 3px;
	border-radius: var(--bt-radius-sm);
	background: var(--bt-surface-2);
	margin-top: 16px;
	padding: 12px 14px;
}

.bt-app__notice.is-success {
	border-left-color: var(--bt-pos);
}

.bt-app__notice.is-error {
	border-left-color: var(--bt-neg);
}

/* ---------- Grouped rail navigation ---------- */

/*
 * Seventeen sections do not fit a single horizontal row, and flattening them
 * hid the structure of the product. The rail groups them by the question the
 * customer arrived with — visibility, risk, evidence, reporting — which is also
 * how enterprise intelligence tools are navigated.
 */

.bt-app__body {
	display: grid;
	/*
	 * minmax(0, 1fr) rather than a bare 1fr: a grid item's automatic minimum
	 * size is its content width, so a wide table or a long section label would
	 * otherwise force the whole console wider than a phone screen and push the
	 * rail's alert badges off the edge.
	 */
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin-top: 12px;
}

@media (min-width: 960px) {
	.bt-app__body {
		grid-template-columns: 216px minmax(0, 1fr);
		gap: 36px;
	}
}

.bt-rail {
	border-top: 1px solid var(--bt-border);
	padding-top: 12px;
}

@media (min-width: 960px) {
	.bt-rail {
		border-top: 0;
		border-right: 1px solid var(--bt-border);
		padding: 8px 20px 24px 0;
		position: sticky;
		top: 16px;
		align-self: start;
		max-height: calc(100vh - 32px);
		overflow-y: auto;
	}
}

.bt-rail__toggle {
	background: var(--bt-surface-2);
	border: 1px solid var(--bt-border-strong);
	border-radius: var(--bt-radius-sm);
	color: var(--bt-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 8px 14px;
	width: 100%;
	text-align: left;
}

.bt-rail__toggle::after {
	content: "\25BE";
	color: var(--bt-text-muted);
	float: right;
}

.bt-rail__toggle[aria-expanded="true"]::after {
	content: "\25B4";
}

@media (min-width: 960px) {
	.bt-rail__toggle {
		display: none;
	}
}

/*
 * Closed by default on narrow screens, but only where the toggle can open it
 * again: with no JS the panel must stay visible, so the hidden state is applied
 * by script rather than assumed here.
 */
.bt-rail__groups {
	display: grid;
	gap: 22px;
	margin-top: 14px;
}

.bt-rail__groups[hidden] {
	display: none;
}

@media (min-width: 960px) {
	.bt-rail__groups {
		margin-top: 0;
	}

	/* The rail is always open on wide screens, whatever the toggle last did. */
	.bt-rail__groups[hidden] {
		display: grid;
	}
}

.bt-rail__group {
	display: grid;
	gap: 6px;
}

.bt-rail__title {
	color: var(--bt-text-faint);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.bt-rail__list {
	display: grid;
	gap: 1px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bt-rail__item {
	margin: 0;
}

.bt-rail__link {
	align-items: center;
	border-left: 2px solid transparent;
	border-radius: 0 var(--bt-radius-sm) var(--bt-radius-sm) 0;
	color: var(--bt-text-muted);
	display: flex;
	gap: 8px;
	font-size: 0.9375rem;
	font-weight: 550;
	justify-content: space-between;
	padding: 7px 10px;
	text-decoration: none;
}

.bt-rail__link:hover,
.bt-rail__link:focus-visible {
	background: var(--bt-surface-2);
	color: var(--bt-text);
}

.bt-rail__link.is-active {
	background: var(--bt-surface-2);
	border-left-color: var(--bt-accent);
	color: var(--bt-text);
	font-weight: 650;
}

.bt-rail__count {
	background: var(--bt-neg);
	border-radius: 999px;
	color: #1c0b08;
	font-size: 0.75rem;
	font-weight: 700;
	min-width: 20px;
	padding: 1px 7px;
	text-align: center;
}

.bt-app__persona {
	align-items: baseline;
	display: inline-flex;
	gap: 8px;
}

/* ---------- Sections ---------- */

.bt-app__main {
	padding-top: 8px;
}

.bt-section {
	border-top: 1px solid var(--bt-border);
	padding: 28px 0;
}

.bt-section:first-child {
	border-top: 0;
}

.bt-section__title {
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: 0.01em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.bt-section__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin: 28px 0 12px;
}

.bt-section__head .bt-section__title {
	margin: 0;
}

.bt-subtitle {
	font-size: 1rem;
	font-weight: 650;
	margin: 28px 0 10px;
}

.bt-note {
	color: var(--bt-text-muted);
	font-size: 0.9375rem;
	margin: 0 0 16px;
}

.bt-note--quiet {
	font-size: 0.875rem;
}

.bt-note--center {
	margin-inline: auto;
	text-align: center;
}

.bt-columns {
	display: grid;
	gap: var(--bt-gap);
	grid-template-columns: 1fr;
}

/*
 * Grid items default to min-width:auto, so a section containing a wide table
 * inflates its own track and pushes the page into horizontal scroll on small
 * screens. Allowing the item to shrink lets .bt-table-wrap scroll instead.
 */
.bt-columns > * {
	min-width: 0;
}

@media (min-width: 900px) {
	.bt-columns {
		grid-template-columns: 1fr 1fr;
	}

	.bt-columns .bt-section {
		border-top: 1px solid var(--bt-border);
	}
}

.bt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

/* ---------- Badges ---------- */

.bt-badge {
	border: 1px solid var(--bt-border-strong);
	border-radius: 999px;
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.03em;
	padding: 2px 10px;
	text-transform: uppercase;
	white-space: nowrap;
}

.bt-badge--plan {
	background: var(--bt-surface-2);
	color: var(--bt-accent);
}

.bt-badge--type {
	color: var(--bt-text-muted);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

.bt-badge--info,
.bt-badge--low {
	color: var(--bt-text-muted);
}

.bt-badge--medium {
	border-color: #78350f;
	color: var(--bt-warn);
}

.bt-badge--high,
.bt-badge--critical {
	border-color: #6f2c20;
	color: var(--bt-neg);
}

.bt-badge--positive {
	border-color: #14532d;
	color: var(--bt-pos);
}

.bt-badge--negative {
	border-color: #6f2c20;
	color: var(--bt-neg);
}

.bt-badge--neutral {
	color: var(--bt-text-muted);
}

/* ---------- Setup checklist ---------- */

.bt-setup {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	margin-top: 20px;
	padding: 20px;
}

.bt-setup__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
}

.bt-panel {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
}

.bt-panel--compact {
	padding: 1.25rem;
}

.bt-kpi-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
	.bt-kpi-grid--2 {
		grid-template-columns: 1fr;
	}
}

.bt-panel__title {
	font-size: 1rem;
	font-weight: 650;
	margin: 0;
}

.bt-code-box {
	background: var(--bt-bg);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-sm, 6px);
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875rem;
	margin: 10px 0;
	overflow-wrap: anywhere;
	padding: 10px 12px;
	user-select: all;
}

.bt-setup__progress {
	color: var(--bt-accent);
	font-size: 0.875rem;
	font-weight: 650;
	margin: 0;
}

.bt-setup__list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.bt-setup__step {
	align-items: baseline;
	border-top: 1px solid var(--bt-border);
	color: var(--bt-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 9px 0;
}

.bt-setup__step:first-child {
	border-top: 0;
}

.bt-setup__step.is-done {
	color: var(--bt-text);
}

.bt-setup__mark {
	color: var(--bt-text-faint);
	font-weight: 700;
	width: 1em;
}

.bt-setup__step.is-done .bt-setup__mark {
	color: var(--bt-pos);
}

.bt-setup__label {
	/*
	 * flex-basis 0, not auto: with auto the label asks for the full width of its
	 * text, and one character too many drops it onto a line of its own below the
	 * bullet. Basis 0 lets it take whatever is left and wrap its text instead.
	 */
	flex: 1 1 0;
	min-width: 0;
}

.bt-setup__hint {
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
	flex: 0 0 auto;
}

/* ---------- KPI cards ---------- */

.bt-kpi-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin-bottom: 16px;
}

.bt-kpi {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	padding: 16px;
}

.bt-kpi__label {
	color: var(--bt-text-muted);
	font-size: 0.8125rem;
	font-weight: 550;
	margin: 0 0 6px;
}

.bt-kpi__value {
	font-size: 1.875rem;
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
}

.bt-kpi__empty {
	color: var(--bt-text-faint);
}

.bt-kpi__delta {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	margin: 6px 0 0;
}

.bt-kpi__delta.is-up {
	color: var(--bt-pos);
}

.bt-kpi__delta.is-down {
	color: var(--bt-neg);
}

.bt-kpi__delta.is-flat {
	color: var(--bt-text-muted);
}

/* ---------- Chart ---------- */

.bt-chart {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	min-height: 240px;
	padding: 16px;
}

.bt-chart svg {
	display: block;
	height: auto;
	width: 100%;
}

.bt-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 12px;
}

.bt-chart__key {
	align-items: center;
	color: var(--bt-text-muted);
	display: inline-flex;
	font-size: 0.8125rem;
	gap: 6px;
}

.bt-chart__swatch {
	border-radius: 2px;
	display: inline-block;
	height: 3px;
	width: 16px;
}

.bt-chart__data {
	margin-top: 14px;
}

.bt-chart__data summary {
	color: var(--bt-text-muted);
	cursor: pointer;
	font-size: 0.875rem;
	padding: 4px 0;
}

/* ---------- Tables ---------- */

.bt-table-wrap {
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
}

.bt-table {
	border-collapse: collapse;
	font-size: 0.9375rem;
	margin: 0;
	width: 100%;
}

.bt-table th,
.bt-table td {
	border-bottom: 1px solid var(--bt-border);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}

.bt-table thead th {
	background: var(--bt-surface-2);
	color: var(--bt-text-muted);
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bt-table tbody tr:last-child th,
.bt-table tbody tr:last-child td {
	border-bottom: 0;
}

.bt-table .is-num {
	font-variant-numeric: tabular-nums lining-nums;
	text-align: right;
}

.bt-table code {
	background: var(--bt-surface-2);
	border-radius: 4px;
	font-size: 0.8125rem;
	padding: 1px 5px;
}

/* ---------- Bars ---------- */

.bt-bars {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bt-bars__item {
	align-items: center;
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(90px, 30%) 1fr auto;
	padding: 7px 0;
}

.bt-bars__label {
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

.bt-bars__track {
	background: var(--bt-surface-2);
	border-radius: 999px;
	display: block;
	height: 8px;
	overflow: hidden;
}

.bt-bars__fill {
	background: var(--bt-accent);
	border-radius: 999px;
	display: block;
	height: 100%;
}

.bt-bars__fill.is-risk {
	background: var(--bt-warn);
}

.bt-bars__value {
	color: var(--bt-text-muted);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	/*
	 * Each row is its own grid, so an auto-sized third column would be a
	 * different width on every row and the counts would not line up. A shared
	 * floor plus right alignment keeps them in a column.
	 */
	min-width: 10ch;
	text-align: right;
	white-space: nowrap;
}

.bt-bars__risk {
	color: var(--bt-neg);
	display: block;
	font-size: 0.75rem;
}

/* ---------- Meters / usage ---------- */

.bt-usage {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.bt-usage__item {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	padding: 14px;
}

.bt-usage__label {
	color: var(--bt-text-muted);
	font-size: 0.8125rem;
	margin: 0 0 4px;
}

.bt-usage__value {
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	font-weight: 650;
	margin: 0 0 8px;
}

.bt-meter {
	background: var(--bt-surface-2);
	border-radius: 999px;
	display: block;
	height: 6px;
	overflow: hidden;
}

.bt-meter__fill {
	background: var(--bt-accent);
	display: block;
	height: 100%;
}

.bt-meter__fill.is-full {
	background: var(--bt-neg);
}

/* ---------- Alerts ---------- */

.bt-alert-list {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bt-alert {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-left: 3px solid var(--bt-border-strong);
	border-radius: var(--bt-radius);
	padding: 16px;
}

.bt-alert--medium {
	border-left-color: var(--bt-warn);
}

.bt-alert--high,
.bt-alert--critical {
	border-left-color: var(--bt-neg);
}

.bt-alert__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bt-alert__title {
	font-size: 1rem;
	font-weight: 650;
	margin: 0;
}

.bt-alert__body {
	color: var(--bt-text-muted);
	font-size: 0.9375rem;
	margin: 8px 0 0;
}

.bt-alert__meta {
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
	margin: 8px 0 0;
}

.bt-alert__evidence {
	color: var(--bt-text-muted);
	font-size: 0.875rem;
	margin: 10px 0 0;
	padding-left: 18px;
}

.bt-alert__foot {
	margin-top: 12px;
}

/* ---------- Forms ---------- */

.bt-form,
.bt-filters {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	margin-bottom: 20px;
	padding: 18px;
}

.bt-filters {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.bt-form__row {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.bt-form__row {
		grid-template-columns: 1fr 1fr;
	}

	.bt-field--wide {
		grid-column: span 1;
	}
}

.bt-field {
	margin-bottom: 12px;
	min-width: 180px;
}

.bt-filters .bt-field {
	margin-bottom: 0;
}

.bt-field__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	margin-bottom: 5px;
}

.bt-field__input {
	background: var(--bt-bg);
	border: 1px solid var(--bt-border-strong);
	border-radius: var(--bt-radius-sm);
	color: var(--bt-text);
	display: block;
	font: inherit;
	font-size: 0.9375rem;
	padding: 9px 11px;
	width: 100%;
}

/* Multi-line fields: one fact, or one line of anything, per row. */
.bt-field__input--area {
	line-height: 1.6;
	min-height: 132px;
	resize: vertical;
}

.bt-field__input:focus {
	border-color: var(--bt-accent);
	outline: none;
}

.bt-field__input::placeholder {
	color: var(--bt-text-faint);
}

.bt-field__help {
	color: var(--bt-text-muted);
	font-size: 0.8125rem;
	margin: 5px 0 0;
}

.bt-field__error {
	color: var(--bt-neg);
	font-size: 0.8125rem;
	margin: 5px 0 0;
}

/* ---------- Lists ---------- */

.bt-list {
	display: grid;
	gap: 10px;
}

.bt-row {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	padding: 14px 16px;
}

.bt-row--loading {
	text-align: center;
	padding: 28px 16px;
}

.bt-row--loading .bt-note {
	margin: 0;
	max-width: none;
}

.bt-row__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
}

.bt-row__title {
	font-size: 0.9375rem;
	font-weight: 650;
	margin: 0;
	overflow-wrap: anywhere;
}

.bt-row__meta {
	color: var(--bt-text-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 12px;
	margin: 8px 0 0;
}

.bt-row__body {
	color: var(--bt-text-muted);
	font-size: 0.9375rem;
	margin: 8px 0 0;
	overflow-wrap: anywhere;
}

.bt-row__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.bt-row a {
	color: var(--bt-accent);
}

.bt-empty {
	background: var(--bt-surface);
	border: 1px dashed var(--bt-border-strong);
	border-radius: var(--bt-radius);
	padding: 28px 20px;
	text-align: center;
}

.bt-empty p {
	color: var(--bt-text-muted);
	margin: 0 0 14px;
}

/* ---------- Tabs, chips, pager ---------- */

.bt-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 16px;
}

.bt-tab {
	background: var(--bt-surface-2);
	border: 1px solid var(--bt-border-strong);
	border-radius: 999px;
	color: var(--bt-text-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	padding: 6px 14px;
}

.bt-tab.is-active {
	background: var(--bt-accent);
	border-color: var(--bt-accent);
	color: var(--bt-accent-ink);
	font-weight: 650;
}

.bt-chip {
	background: var(--bt-surface-2);
	border: 1px solid var(--bt-border-strong);
	border-radius: 999px;
	color: var(--bt-text-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.8125rem;
	padding: 6px 13px;
	text-align: left;
}

.bt-chip:hover,
.bt-chip:focus-visible {
	border-color: var(--bt-accent);
	color: var(--bt-text);
}

.bt-suggest {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0;
}

.bt-pager {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 18px;
}

.bt-pager__status {
	color: var(--bt-text-muted);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

/* ---------- Assistant ---------- */

.bt-thread {
	display: grid;
	gap: 12px;
}

.bt-thread:empty {
	display: none;
}

.bt-msg {
	border-radius: var(--bt-radius);
	max-width: 62ch;
	padding: 14px 16px;
}

.bt-msg--user {
	background: var(--bt-surface-2);
	border: 1px solid var(--bt-border-strong);
	justify-self: end;
}

.bt-msg--assistant {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
}

.bt-msg__role {
	color: var(--bt-text-faint);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.bt-msg__text {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.bt-msg__evidence {
	border-top: 1px solid var(--bt-border);
	color: var(--bt-text-muted);
	font-size: 0.8125rem;
	margin: 12px 0 0;
	padding-top: 10px;
}

.bt-msg__evidence ol {
	margin: 6px 0 0;
	padding-left: 20px;
}

.bt-msg__evidence a {
	color: var(--bt-accent);
}

.bt-composer {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.bt-composer__input {
	background: var(--bt-bg);
	border: 1px solid var(--bt-border-strong);
	border-radius: var(--bt-radius-sm);
	color: var(--bt-text);
	flex: 1 1 320px;
	font: inherit;
	font-size: 0.9375rem;
	padding: 11px 13px;
	resize: vertical;
}

.bt-composer__input:focus {
	border-color: var(--bt-accent);
	outline: none;
}

/* ---------- Brief ---------- */

.bt-brief {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	padding: 20px;
}

.bt-brief h3 {
	font-size: 1.0625rem;
	margin: 0 0 4px;
}

.bt-brief__date {
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
	margin: 0 0 16px;
}

.bt-brief__section {
	border-top: 1px solid var(--bt-border);
	margin-top: 16px;
	padding-top: 14px;
}

.bt-brief__section h4 {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 8px;
	text-transform: uppercase;
	color: var(--bt-text-muted);
}

.bt-brief__body {
	margin: 0;
	white-space: pre-wrap;
}

/* ---------- Definition list ---------- */

.bt-defs {
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	margin: 0 0 20px;
	overflow: hidden;
}

.bt-defs__row {
	border-top: 1px solid var(--bt-border);
	display: grid;
	gap: 4px;
	grid-template-columns: 1fr;
	padding: 12px 16px;
}

.bt-defs__row:first-child {
	border-top: 0;
}

@media (min-width: 640px) {
	.bt-defs__row {
		grid-template-columns: 220px 1fr;
	}
}

.bt-defs dt {
	color: var(--bt-text-muted);
	font-size: 0.875rem;
}

.bt-defs dd {
	font-weight: 550;
	margin: 0;
}

/* ---------- Gate and onboarding ---------- */

.bt-app--gate,
.bt-app--onboard {
	text-align: left;
}

.bt-gate,
.bt-onboard {
	margin: 0 auto;
	max-width: 620px;
	padding: 24px 0;
}

.bt-gate {
	text-align: center;
}

.bt-gate__title,
.bt-onboard__title {
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
}

.bt-gate__lead,
.bt-onboard__lead {
	color: var(--bt-text-muted);
	margin: 0 0 24px;
}

.bt-gate__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* ---------- Footer ---------- */

.bt-app__foot {
	border-top: 1px solid var(--bt-border);
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
	margin-top: 24px;
	padding-top: 14px;
}

.bt-app__foot p {
	margin: 0;
}

/* ---------- Pricing ---------- */

/*
 * Explicit column counts rather than auto-fit. With minmax(250px, 1fr) the
 * number of columns depended on the container the theme happened to give the
 * page, so the four plans could silently land as three-plus-one — which reads
 * as a mistake. One column on phones, two on tablets, all four side by side
 * from 1080px up.
 */
.bt-pricing__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	margin-bottom: 24px;
}

@media (min-width: 720px) {
	.bt-pricing__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.bt-pricing__grid {
		gap: 20px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Four columns need the full width the theme can give. */
.bt-pricing {
	margin-inline: auto;
	max-width: 1240px;
	width: 100%;
}

.bt-plan {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	display: flex;
	flex-direction: column;
	padding: 24px;
}

.bt-plan.is-featured {
	border-color: var(--bt-accent);
	box-shadow: 0 0 0 1px var(--bt-accent) inset;
}

.bt-plan__flag {
	color: var(--bt-accent);
	/* 12px floor. */
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.bt-plan__name {
	font-size: 1.125rem;
	font-weight: 650;
	margin: 0 0 10px;
}

.bt-plan__price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
}

.bt-plan__amount {
	font-size: 2.25rem;
	font-variant-numeric: lining-nums;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
}

.bt-plan__period,
.bt-plan__custom {
	color: var(--bt-text-muted);
	font-size: 0.9375rem;
}

.bt-plan__custom {
	font-size: 1.375rem;
	font-weight: 650;
}

.bt-plan__pitch {
	color: var(--bt-text-muted);
	font-size: 0.9375rem;
	margin: 0 0 18px;
}

.bt-plan__list {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	flex: 1 1 auto;
}

.bt-plan__list li {
	border-top: 1px solid var(--bt-border);
	font-size: 0.9375rem;
	padding: 8px 0;
}

.bt-plan__list li:first-child {
	border-top: 0;
}

.bt-plan__list li.is-off {
	color: var(--bt-text-faint);
}

.bt-plan__cta {
	display: block;
	text-align: center;
}

/* The plan the viewer is already on. */
.bt-plan.is-current {
	border-color: var(--bt-pos);
}

.bt-plan__flag--current {
	color: var(--bt-pos);
}

/* Two gateways means two buttons; stack them so neither is cramped. */
.bt-plan__pay {
	display: grid;
	gap: 8px;
}

.bt-alert--warn {
	background: rgba(251, 191, 36, 0.1);
	border: 1px solid rgba(251, 191, 36, 0.45);
	border-radius: var(--bt-radius-sm);
	color: #fde68a;
	font-size: 0.9375rem;
	margin: 0 auto 20px;
	max-width: 60ch;
	padding: 11px 14px;
	text-align: center;
}

.bt-pricing {
	text-align: center;
}

/* Card interiors stay left-aligned — a centred feature list is hard to scan. */
.bt-pricing .bt-plan {
	text-align: left;
}

.bt-note--pay {
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
}

/* ---------- Utilities ---------- */

.bt-app .screen-reader-text,
.bt-pricing .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.bt-spinner {
	animation: bt-spin 800ms linear infinite;
	border: 2px solid var(--bt-border-strong);
	border-radius: 50%;
	border-top-color: var(--bt-accent);
	display: inline-block;
	height: 14px;
	vertical-align: -2px;
	width: 14px;
}

@keyframes bt-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bt-app *,
	.bt-pricing * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---------- Auth screens ---------- */

.bt-auth {
	display: flex;
	justify-content: center;
	/* No min-height: this renders inside a themed page that already has a
	   header and footer, and 100vh would leave a dead band above the footer. */
	overflow: hidden;
	/* The themed page wrapper already adds its own block padding below. */
	padding: clamp(24px, 5vw, 56px) 20px clamp(16px, 3vw, 32px);
	position: relative;
}

/* A single soft light source behind the card, so the page reads as depth
   rather than a flat black rectangle. Inset is deliberately negative and wide
   so the gradient's own bounding box never shows as a seam against the page. */
.bt-auth::before {
	background: radial-gradient(closest-side, rgba(205, 155, 71, 0.17), transparent 78%);
	content: "";
	height: 900px;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: -320px;
	transform: translateX(-50%);
	width: 900px;
}

.bt-auth__inner {
	margin: 0 auto;
	max-width: 460px;
	position: relative;
	text-align: center;
	width: 100%;
}

/* Supporting points appear only in the two-column layout; see the end of this file. */
.bt-auth__points {
	display: none;
}

.bt-auth__main {
	width: 100%;
}


.bt-auth__brand {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-bottom: 28px;
}

.bt-auth__mark {
	align-items: center;
	background: var(--bt-accent);
	border-radius: 9px;
	color: var(--bt-accent-ink);
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 800;
	height: 32px;
	justify-content: center;
	letter-spacing: 0.04em;
	width: 32px;
}

.bt-auth__wordmark {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bt-auth__eyebrow {
	color: var(--bt-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.bt-auth__title {
	font-size: clamp(1.625rem, 5vw, 2.125rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	margin: 0 0 10px;
}

.bt-auth__sub {
	color: var(--bt-text-muted);
	font-size: 0.9375rem;
	margin: 0 auto 26px;
	max-width: 40ch;
}

.bt-auth__msg {
	border: 1px solid var(--bt-border-strong);
	border-radius: var(--bt-radius-sm);
	font-size: 0.875rem;
	margin: 0 0 18px;
	padding: 11px 14px;
	text-align: left;
}

.bt-auth__msg--error {
	background: rgba(204, 98, 80, 0.1);
	border-color: rgba(204, 98, 80, 0.45);
	color: #f3c9c1;
}

.bt-auth__msg--ok {
	background: rgba(52, 211, 153, 0.1);
	border-color: rgba(52, 211, 153, 0.4);
	color: #bbf7d0;
}

.bt-auth__card {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(2, 6, 23, 0.55);
	padding: clamp(22px, 5vw, 32px);
	text-align: left;
}

.bt-auth__card .bt-field {
	margin-bottom: 16px;
	min-width: 0;
}

.bt-auth__card .bt-field__input {
	background: var(--bt-surface-2);
	padding: 11px 13px;
}

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.bt-auth__trap {
	height: 0;
	left: -9999px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.bt-auth__row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin: 0 0 20px;
}

.bt-auth__remember {
	align-items: center;
	color: var(--bt-text-muted);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.875rem;
	gap: 8px;
}

/*
 * A native checkbox renders as a white box on this dark card: accent-color
 * only tints the CHECKED state, so the default, unchecked control was the
 * brightest thing on the form. Drawn by hand instead, with the tick as a
 * border-only glyph so it needs no image and no icon font.
 */
.bt-auth__remember input {
	appearance: none;
	background: rgba(32, 44, 77, 0.9);
	border: 1px solid var(--bt-border-strong, #2B3656);
	border-radius: 4px;
	cursor: pointer;
	display: inline-block;
	flex: none;
	height: 16px;
	margin: 0;
	position: relative;
	transition: background 0.15s ease, border-color 0.15s ease;
	width: 16px;
}

.bt-auth__remember input:hover {
	border-color: var(--bt-accent);
}

.bt-auth__remember input:checked {
	background: var(--bt-accent);
	border-color: var(--bt-accent);
}

.bt-auth__remember input:checked::after {
	border-bottom: 2px solid var(--bt-accent-ink);
	border-right: 2px solid var(--bt-accent-ink);
	content: "";
	height: 8px;
	left: 5px;
	position: absolute;
	top: 2px;
	transform: rotate(45deg);
	width: 4px;
}

.bt-auth__remember input:focus-visible {
	outline: 2px solid var(--bt-accent);
	outline-offset: 2px;
}

.bt-auth__submit {
	display: block;
	text-align: center;
	width: 100%;
}

.bt-auth__link {
	color: var(--bt-accent);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.bt-auth__link:hover,
.bt-auth__link:focus-visible {
	text-decoration: underline;
}

.bt-auth__alt {
	color: var(--bt-text-muted);
	font-size: 0.875rem;
	margin: 18px 0 0;
	text-align: center;
}

.bt-auth__fine {
	color: var(--bt-text-faint);
	font-size: 0.75rem;
	line-height: 1.5;
	margin: 14px 0 0;
	text-align: center;
}

.bt-auth__signed {
	color: var(--bt-text-muted);
	font-size: 0.9375rem;
	margin: 0 0 18px;
	text-align: center;
}

.bt-auth__trust {
	color: var(--bt-text-faint);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.75rem;
	gap: 8px 22px;
	justify-content: center;
	letter-spacing: 0.02em;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

@media (max-width: 480px) {
	.bt-auth {
		padding: 24px 16px 40px;
	}

	.bt-auth__trust {
		gap: 6px 16px;
	}
}

.bt-plan__renew {
	color: var(--bt-text-faint);
	font-size: 0.75rem;
	margin: 8px 0 0;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Pricing page header
 *
 * The plan cards were the first thing on the page, which left it with no <h1>
 * and no context. Centred to match the marketing front page.
 * ------------------------------------------------------------------------ */

.bt-pricing__head {
	margin: 0 auto clamp(28px, 5vw, 48px);
	max-width: 640px;
	text-align: center;
}

.bt-pricing__eyebrow {
	color: var(--bt-accent);
	font-size: 0.75rem;
	font-weight: 650;
	letter-spacing: 0.12em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.bt-pricing__title {
	color: var(--bt-text);
	font-size: clamp(1.75rem, 4.2vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 14px;
	text-wrap: balance;
}

.bt-pricing__lede {
	color: var(--bt-text-muted);
	font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
	line-height: 1.6;
	margin: 0;
}

/*
 * Wide screens: story on the left, form on the right. Kept to a single
 * breakpoint so there is no intermediate width where the two columns are both
 * too narrow to read — below 1040px the aside simply stacks above the form and
 * the supporting points step out of the way.
 */
/* ---------- Console header on small screens ---------- */

@media (max-width: 700px) {
	.bt-app__actions {
		flex-wrap: wrap;
		gap: 8px;
	}

	.bt-app__persona .bt-app__switch-select {
		max-width: 170px;
	}
}

/* ---------- Workspace switcher ---------- */

.bt-app__switch {
	align-items: baseline;
	display: inline-flex;
	gap: 8px;
}

.bt-app__switch-label {
	color: var(--bt-text-faint);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* "View as" must not break across two lines beside its control. */
	white-space: nowrap;
}

.bt-app__switch-select {
	appearance: none;
	background: var(--bt-surface-2);
	border: 1px solid var(--bt-border-strong);
	border-radius: var(--bt-radius-sm);
	color: var(--bt-text);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 650;
	max-width: 260px;
	padding: 4px 28px 4px 10px;
	text-overflow: ellipsis;
	/* Chevron drawn inline so the control reads as a menu on a dark surface. */
	background-image: linear-gradient(45deg, transparent 50%, var(--bt-text-muted) 50%), linear-gradient(135deg, var(--bt-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
	background-repeat: no-repeat;
	background-size: 5px 5px, 5px 5px;
}

.bt-app__switch-select:hover,
.bt-app__switch-select:focus-visible {
	border-color: var(--bt-accent);
}

/* Options inherit the OS menu, not the page, so set both explicitly. */
.bt-app__switch-select option {
	background: #202C4D;
	color: #F4F1E9;
}

/* ---------- Actionable setup checklist ---------- */

.bt-setup__label--link {
	border-bottom: 1px solid rgba(205, 155, 71, 0.35);
	color: var(--bt-accent);
	text-decoration: none;
}

.bt-setup__label--link:hover,
.bt-setup__label--link:focus-visible {
	border-bottom-color: var(--bt-accent);
	color: var(--bt-text);
}

.bt-chip.is-active {
	border-color: var(--bt-accent);
	color: var(--bt-text);
}

a.bt-chip {
	text-decoration: none;
}

.bt-callout {
	background: rgba(205, 155, 71, 0.07);
	border: 1px solid rgba(205, 155, 71, 0.3);
	border-radius: var(--bt-radius);
	color: var(--bt-text-muted);
	display: grid;
	gap: 4px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0 0 18px;
	padding: 14px 16px;
}

.bt-callout strong {
	color: var(--bt-text);
	font-weight: 650;
}

/* ---------- Paywall ---------- */

.bt-app--paywall .bt-gate {
	max-width: 1080px;
	/* The plan grid reads as a left-aligned table, so the head matches it. */
	text-align: left;
}

.bt-gate__head {
	margin-bottom: 24px;
}

.bt-gate__org {
	color: var(--bt-text-faint);
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.bt-gate__lede {
	color: var(--bt-text-muted);
	margin: 0;
	max-width: 62ch;
}

.bt-gate__notice {
	background: rgba(251, 191, 36, 0.08);
	border: 1px solid rgba(251, 191, 36, 0.35);
	border-radius: var(--bt-radius);
	color: var(--bt-text-muted);
	font-size: 0.9375rem;
	margin: 0 0 20px;
	padding: 13px 16px;
	text-align: left;
}

.bt-gate__admin {
	color: var(--bt-text-faint);
	font-size: 0.875rem;
	margin: 8px 0 0;
}

.bt-gate__plans {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
	margin: 0 0 22px;
	text-align: left;
}

.bt-gate__plan {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
}

.bt-gate__plan.is-featured {
	border-color: var(--bt-accent);
	box-shadow: 0 0 0 1px rgba(205, 155, 71, 0.35);
}

.bt-gate__plan-name {
	font-size: 1.0625rem;
	font-weight: 650;
	margin: 0;
}

.bt-gate__plan-price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
}

.bt-gate__plan-amount {
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.bt-gate__plan-period,
.bt-gate__plan-custom {
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
}

.bt-gate__plan-blurb {
	color: var(--bt-text-muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 0;
	/* Push the CTA to the card foot so buttons line up across the row. */
	flex: 1 1 auto;
}

.bt-gate__plan-pay {
	display: grid;
	gap: 8px;
	margin: 0;
}

.bt-gate__plan-cta {
	justify-content: center;
	text-align: center;
	width: 100%;
}

.bt-gate__foot {
	color: var(--bt-text-faint);
	font-size: 0.875rem;
	margin: 0;
}

.bt-gate__meta {
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
	margin: 14px 0 0;
}

@media (min-width: 700px) {
	.bt-gate__plans {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.bt-gate__plans {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Account view ---------- */

.bt-panel__head {
	margin-bottom: 20px;
}

.bt-panel__lede {
	color: var(--bt-text-muted);
	font-size: 0.9375rem;
	margin: 6px 0 0;
}

.bt-account {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

.bt-account__col {
	display: grid;
	align-content: start;
	gap: 16px;
	min-width: 0;
}

.bt-account__card {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	/* Without this the payment table stretches the card past the viewport. */
	min-width: 0;
	padding: 18px;
}

.bt-account__heading {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 14px;
	text-transform: uppercase;
	color: var(--bt-text-faint);
}

.bt-account__form .bt-account__heading:not(:first-child) {
	border-top: 1px solid var(--bt-border);
	margin-top: 26px;
	padding-top: 22px;
}

.bt-account__list {
	display: grid;
	gap: 10px 16px;
	grid-template-columns: auto 1fr;
	margin: 0;
}

.bt-account__list dt {
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
}

.bt-account__list dd {
	font-size: 0.875rem;
	font-weight: 550;
	margin: 0;
	overflow-wrap: anywhere;
}

.bt-account__plan {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 8px;
}

.bt-account__plan-name {
	font-size: 1.125rem;
	font-weight: 700;
}

.bt-account__meta {
	color: var(--bt-text-muted);
	font-size: 0.875rem;
	margin: 0;
}

.bt-account__meta.is-warn {
	color: var(--bt-warn);
}

.bt-account__actions {
	margin: 14px 0 0;
}

.bt-form__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.bt-table--compact th,
.bt-table--compact td {
	font-size: 0.8125rem;
	padding: 8px 10px;
}

@media (min-width: 900px) {
	.bt-account {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}
/* ---------- Explainable score cards ---------- */

/*
 * The product's central claim is that no number is a black box, so the card
 * always shows the components, their weights and their signed contributions
 * next to the headline figure. The contributions sum to the score, which is
 * what makes the card auditable rather than decorative.
 */

.bt-score {
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-sm);
	background: var(--bt-surface-2);
	display: grid;
	gap: 14px;
	padding: 20px;
}

.bt-score__head {
	align-items: start;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	justify-content: space-between;
}

.bt-score__titles {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.bt-score__title {
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: 0.01em;
	margin: 0;
}

.bt-score__summary,
.bt-section__lede {
	color: var(--bt-text-muted);
	font-size: 0.875rem;
	line-height: 1.55;
	margin: 0;
}

.bt-score__figure {
	align-items: baseline;
	display: flex;
	flex-shrink: 0;
	gap: 10px;
}

.bt-score__value {
	font-size: 2rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0;
}

.bt-score__narrative {
	color: var(--bt-text);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

.bt-score__components {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bt-score__component {
	display: grid;
	gap: 5px;
	margin: 0;
}

.bt-score__component-label {
	align-items: baseline;
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin: 0;
}

.bt-score__component-name {
	font-size: 0.875rem;
	font-weight: 600;
}

.bt-score__component-weight {
	color: var(--bt-text-faint);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bt-score__track {
	background: var(--bt-surface-3, rgba(203, 198, 184, 0.16));
	border-radius: 999px;
	display: block;
	height: 6px;
	overflow: hidden;
}

.bt-score__fill {
	background: var(--bt-accent);
	border-radius: 999px;
	display: block;
	height: 100%;
}

.bt-score__fill.is-negative {
	background: var(--bt-neg);
}

.bt-score__component-figures {
	color: var(--bt-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	justify-content: space-between;
	margin: 0;
}

.bt-score__component-contribution {
	color: var(--bt-pos);
	font-weight: 600;
}

.bt-score__component-contribution.is-negative {
	color: var(--bt-neg);
}

.bt-score__component-detail {
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
	line-height: 1.5;
	margin: 0;
}

.bt-score__foot {
	border-top: 1px solid var(--bt-border);
	display: grid;
	gap: 10px;
	padding-top: 12px;
}

.bt-score__confidence {
	display: grid;
	gap: 2px;
	font-size: 0.8125rem;
	margin: 0;
}

.bt-score__confidence strong {
	font-weight: 650;
}

.bt-score__confidence.is-high strong {
	color: var(--bt-pos);
}

.bt-score__confidence.is-medium strong {
	color: var(--bt-warn, #fbbf24);
}

.bt-score__confidence.is-low strong {
	color: var(--bt-neg);
}

.bt-score__confidence span {
	color: var(--bt-text-muted);
	line-height: 1.5;
}

.bt-score__method summary {
	color: var(--bt-text-muted);
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
}

.bt-score__method summary:hover {
	color: var(--bt-text);
}

.bt-score__method > * + * {
	margin-top: 10px;
}

.bt-score__formula {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-sm);
	color: var(--bt-text-muted);
	font-family: var(--bt-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: 0.75rem;
	line-height: 1.6;
	margin: 0;
	overflow-x: auto;
	padding: 10px 12px;
}

.bt-table--tight th,
.bt-table--tight td {
	font-size: 0.8125rem;
	padding: 6px 10px;
}

/* A grid of score cards, two up where there is room. */
.bt-score-grid {
	display: grid;
	gap: 16px;
}

@media (min-width: 1100px) {
	.bt-score-grid--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}



/* --- Module screens: view headers, window switcher, misc --- */

.bt-view__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: var(--bt-gap);
}

.bt-view__title {
	margin: 0 0 6px;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.bt-view__lede {
	margin: 0;
	color: var(--bt-text-muted);
	font-size: 14px;
	line-height: 1.6;
}

.bt-range {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-sm);
	background: var(--bt-surface);
}

.bt-range__option {
	padding: 6px 12px;
	border-radius: 4px;
	color: var(--bt-text-muted);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.bt-range__option:hover,
.bt-range__option:focus-visible {
	color: var(--bt-text);
	background: var(--bt-surface-2);
}

.bt-range__option.is-active {
	color: var(--bt-accent-ink);
	background: var(--bt-accent);
	font-weight: 600;
}

.bt-section__subtitle {
	margin: var(--bt-gap) 0 10px;
	font-size: 14px;
	font-weight: 600;
}

.bt-muted {
	color: var(--bt-text-faint);
}

.bt-code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--bt-surface-2);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: var(--bt-text);
}

.bt-claim__evidence {
	display: block;
	margin-top: 4px;
	color: var(--bt-text-muted);
	font-size: 12px;
	line-height: 1.5;
	font-weight: 400;
}

/* Your own row in a competitive table. */
.bt-table tbody tr.is-you {
	background: rgba(205, 155, 71, 0.07);
}

.bt-table tbody tr.is-you th {
	color: var(--bt-text);
}

.bt-form--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
}

.bt-form--inline .bt-field {
	margin: 0;
}


/* The inline facts editor on an entity row. */
.bt-row__editor {
	margin: 12px 0 0;
	padding: 14px;
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius-sm);
	background: var(--bt-surface-2);
}

.bt-row__editor .bt-actions {
	margin-top: 12px;
}


@media (min-width: 1040px) {
	.bt-auth__inner {
		align-items: center;
		display: grid;
		gap: clamp(40px, 6vw, 88px);
		grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
		max-width: 1080px;
		text-align: left;
	}

	.bt-auth__aside {
		max-width: 30rem;
	}

	.bt-auth__brand {
		justify-content: flex-start;
	}

	.bt-auth__title {
		font-size: clamp(2.25rem, 3.4vw, 3rem);
	}

	.bt-auth__sub {
		/* The base rule centres this with `margin: 0 auto`; both sides must be
		   reset or the paragraph sits indented from the heading above it. */
		margin-left: 0;
		margin-right: 0;
		max-width: 34ch;
	}

	.bt-auth__points {
		display: grid;
		gap: 20px;
		list-style: none;
		margin: 36px 0 0;
		padding: 0;
	}

	.bt-auth__points li {
		border-left: 2px solid var(--bt-accent);
		display: grid;
		gap: 4px;
		padding-left: 16px;
	}

	.bt-auth__points strong {
		color: var(--bt-text);
		font-size: 0.9375rem;
		font-weight: 600;
	}

	.bt-auth__points span {
		color: var(--bt-text-muted);
		font-size: 0.875rem;
		line-height: 1.55;
	}

	.bt-auth__trust {
		justify-content: flex-start;
	}
}

/* Public contact page */
.bt-contact{max-width:1100px;margin:0 auto;padding:clamp(2rem,5vw,5rem) 1.25rem}
.bt-contact__head{max-width:760px;margin:0 auto 2.5rem;text-align:center}
.bt-contact__grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:1.5rem}
.bt-contact__card,.bt-contact__aside{border:1px solid rgba(203,198,184,.2);border-radius:18px;background:rgba(32,44,77,.72);padding:clamp(1.25rem,3vw,2rem)}
.bt-contact__card h2,.bt-contact__aside h2{margin-top:0}
.bt-contact__form p{margin:0 0 1rem}
.bt-contact__form label{display:block;margin-bottom:.4rem;font-weight:600}
.bt-contact__form input,.bt-contact__form textarea{display:block;width:100%;box-sizing:border-box;border:1px solid rgba(203,198,184,.35);border-radius:10px;background:#0E1526;color:#F4F1E9;padding:.8rem .9rem;font:inherit}
.bt-contact__form input:focus,.bt-contact__form textarea:focus{outline:2px solid rgba(205,155,71,.45);outline-offset:2px}
.bt-contact__honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.bt-contact__notice{margin:0 0 1rem;padding:.8rem 1rem;border-radius:10px}
.bt-contact__notice.is-success{border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.bt-contact__notice.is-error{border:1px solid rgba(204,98,80,.35);background:rgba(204,98,80,.08)}
.bt-contact__aside a{word-break:break-word}
.bt-contact__note{font-size:.92rem;opacity:.78}
@media (max-width:760px){.bt-contact__grid{grid-template-columns:1fr}}

/* ---- Free preview ---------------------------------------------------------- */

.bt-preview {
	margin: 0 auto;
	max-width: 880px;
	padding: 32px 20px 56px;
}

.bt-preview__notice {
	background: rgba(204, 98, 80, 0.12);
	border: 1px solid var(--bt-neg);
	border-radius: var(--bt-radius-sm);
	color: var(--bt-text);
	margin: 0 0 20px;
	padding: 12px 16px;
}

.bt-preview__form,
.bt-preview__card,
.bt-preview__locked {
	background: var(--bt-surface);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	margin: 0 0 var(--bt-gap);
	padding: 24px;
}

.bt-preview__label {
	color: var(--bt-text);
	display: block;
	font-weight: 600;
	margin: 0 0 10px;
}

.bt-preview__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.bt-preview__input {
	background: var(--bt-bg);
	border: 1px solid var(--bt-border-strong);
	border-radius: var(--bt-radius-sm);
	color: var(--bt-text);
	flex: 1 1 260px;
	font-family: var(--bt-font);
	font-size: 1rem;
	padding: 12px 14px;
}

.bt-preview__input:focus {
	border-color: var(--bt-accent);
	outline: none;
}

.bt-preview__h {
	color: var(--bt-text);
	font-size: 1.125rem;
	margin: 0 0 12px;
}

.bt-preview__ai {
	color: var(--bt-text);
	margin: 0 0 14px;
}

.bt-preview__hint {
	color: var(--bt-text-faint);
	font-size: 0.875rem;
	margin: 10px 0 0;
}

.bt-preview__news,
.bt-preview__cites {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bt-preview__news li {
	border-top: 1px solid var(--bt-border);
	padding: 12px 0;
}

.bt-preview__news li:first-child {
	border-top: 0;
	padding-top: 0;
}

.bt-preview__news a,
.bt-preview__cites a {
	color: var(--bt-accent-bright);
	text-decoration: none;
}

.bt-preview__news a:hover,
.bt-preview__cites a:hover {
	text-decoration: underline;
}

.bt-preview__meta {
	color: var(--bt-text-faint);
	display: block;
	font-size: 0.8125rem;
	margin-top: 2px;
}

.bt-preview__cites li {
	font-size: 0.9375rem;
	padding: 2px 0;
}

.bt-preview__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bt-preview__lock {
	background: var(--bt-bg);
	border: 1px dashed var(--bt-border-strong);
	border-radius: var(--bt-radius-sm);
	opacity: 0.85;
	padding: 16px;
}

.bt-preview__lock p {
	color: var(--bt-text-muted);
	font-size: 0.9375rem;
	margin: 6px 0 0;
}

.bt-preview__badge {
	background: var(--bt-surface-2);
	border-radius: 999px;
	color: var(--bt-accent-bright);
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 8px 6px 0;
	padding: 2px 10px;
	text-transform: uppercase;
}

.bt-preview__cta {
	margin: 22px 0 0;
	text-align: center;
}

.bt-preview__foot {
	text-align: center;
}

.bt-preview__foot a {
	color: var(--bt-text-muted);
	margin-left: 10px;
}

@media (max-width: 640px) {
	.bt-preview__grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Preview: AI snapshot header + sources -------------------------------- */

.bt-preview__cardhead {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	justify-content: space-between;
	margin: 0 0 12px;
}

.bt-preview__cardhead .bt-preview__h {
	margin: 0;
}

.bt-preview__chip {
	background: var(--bt-surface-2);
	border: 1px solid var(--bt-border-strong);
	border-radius: 999px;
	color: var(--bt-text-muted);
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	padding: 3px 12px;
}

.bt-src {
	border-top: 1px solid var(--bt-border);
	margin-top: 22px;
	padding-top: 20px;
}

.bt-src__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	justify-content: space-between;
}

.bt-src__title {
	color: var(--bt-accent-bright);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.bt-src__summary {
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
	margin: 0;
}

.bt-src__grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 14px;
}

.bt-src__card {
	background: var(--bt-bg);
	border: 1px solid var(--bt-border);
	border-radius: var(--bt-radius);
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.bt-src__card:hover,
.bt-src__card:focus-visible {
	border-color: var(--bt-accent);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	outline: none;
	transform: translateY(-1px);
}

.bt-src__top {
	align-items: center;
	display: flex;
	gap: 12px;
}

.bt-src__mono {
	align-items: center;
	background: var(--bt-surface-2);
	border: 1px solid var(--bt-border-strong);
	border-radius: 9px;
	color: var(--bt-accent-bright);
	display: inline-flex;
	flex: none;
	font-size: 0.9375rem;
	font-weight: 700;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.bt-src__id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bt-src__host {
	color: var(--bt-text);
	font-size: 0.9375rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.bt-src__type {
	color: var(--bt-text-faint);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.bt-src__type--official {
	color: #7fb7e6;
}

.bt-src__type--established {
	color: var(--bt-accent-bright);
}

.bt-src__ttl {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--bt-text-muted);
	display: -webkit-box;
	font-size: 0.9375rem;
	line-height: 1.45;
	min-height: 2.9em;
	overflow: hidden;
}

.bt-src__foot {
	align-items: center;
	border-top: 1px solid var(--bt-border);
	display: flex;
	gap: 10px;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
}

.bt-src__status {
	align-items: center;
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 7px;
}

.bt-src__dot {
	background: currentColor;
	border-radius: 50%;
	flex: none;
	height: 8px;
	width: 8px;
}

.bt-src__status--ok {
	color: var(--bt-pos);
}

.bt-src__status--warn {
	color: var(--bt-warn);
}

.bt-src__status--bad {
	color: var(--bt-neg);
}

.bt-src__status--muted {
	color: var(--bt-text-faint);
}

.bt-src__open {
	color: var(--bt-text-faint);
	flex: none;
	font-size: 0.8125rem;
}

.bt-src__card:hover .bt-src__open {
	color: var(--bt-accent-bright);
}

.bt-src__note {
	color: var(--bt-text-faint);
	font-size: 0.8125rem;
	line-height: 1.5;
	margin: 14px 0 0;
}

@media (max-width: 720px) {
	.bt-src__grid {
		grid-template-columns: 1fr;
	}
}

/* The preview borrows .bt-pricing for its design tokens, which also centres
   text. Body content reads better left-aligned; only the header stays centred. */
.bt-preview {
	text-align: left;
}

.bt-preview .bt-pricing__head {
	text-align: center;
}

.bt-preview__ai {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.bt-src__status {
	white-space: nowrap;
}

.bt-preview__foot {
	text-align: center;
}