/* =============================================================================
   Brand Multiple — Form + Result Page
   =============================================================================
   Naming conventions:
     .hhs-bmf-*  → multi-step form
     .hhs-bmr-*  → result page

   Tokens:
     --bmf-*     → form-scoped
     --bmr-*     → result-scoped

   Color palette (HHS brand standards v3.0):
     FH Red:      #FF484A   — primary CTA, accent ornament (one per screen)
     FH Black:    #323232   — structure, dark sections
     FH Cyan:     #5FD0DF   — meta labels, trust copy, italic-serif seams
     647 Navy:    #276092   — depth on dark, ICP03 contexts
     459 Gold:    #DECC62   — secondary accent
     Cream/Paper: #FAF7F1   — page background
     Charcoal:    #0D0D0D   — high-contrast body text

   Typography:
     DM Sans     — all UI text
     DM Serif Display (italic) — seam copy, trust lines, result pull-quotes

   Motion rules: no appearance animations on copy.
   Widow rule: all H2/H3 audited at 1440/1024/768/390.
   CTA rule: red primary, ghost secondary, no two-line CTAs.
   ============================================================================= */

/* ── Tokens ──────────────────────────────────────────────────────────────── */

:root {
	/* Form */
	--bmf-cream:           #FAF7F1;
	--bmf-charcoal:        #0D0D0D;
	--bmf-red:             #FF484A;
	--bmf-black:           #323232;
	--bmf-cyan:            #5FD0DF;
	--bmf-gold:            #DECC62;
	--bmf-border:          rgba(14, 14, 16, 0.12);
	--bmf-border-strong:   rgba(14, 14, 16, 0.22);
	--bmf-tint-04:         rgba(14, 14, 16, 0.04);
	--bmf-tint-08:         rgba(14, 14, 16, 0.08);
	--bmf-tint-red-06:     rgba(255, 72, 74, 0.06);
	--bmf-tint-red-12:     rgba(255, 72, 74, 0.12);
	--bmf-tint-cyan-08:    rgba(95, 208, 223, 0.08);
	--bmf-radius:          2px;
	--bmf-radius-soft:     4px;
	--bmf-max-form:        40rem;   /* form panel max-width */
	--bmf-pad-x:           1.5rem;
	--bmf-pad-y:           2rem;
	--bmf-sticky-offset:   79px;    /* fixed nav height */

	/* Result */
	--bmr-cream:           #FAF7F1;
	--bmr-charcoal:        #0D0D0D;
	--bmr-red:             #FF484A;
	--bmr-black:           #323232;
	--bmr-cyan:            #5FD0DF;
	--bmr-gold:            #DECC62;
	--bmr-border:          rgba(14, 14, 16, 0.10);
	--bmr-border-strong:   rgba(14, 14, 16, 0.20);
	--bmr-tint-04:         rgba(14, 14, 16, 0.04);
	--bmr-tint-08:         rgba(14, 14, 16, 0.08);
	--bmr-tint-red-06:     rgba(255, 72, 74, 0.06);
	--bmr-tint-red-12:     rgba(255, 72, 74, 0.12);
	--bmr-radius:          2px;
	--bmr-radius-soft:     4px;
	--bmr-max-content:     1200px;
	--bmr-max-readable:    60rem;
	--bmr-sticky-offset:   79px;
}

/* =============================================================================
   FORM — .hhs-bmf-*
   ============================================================================= */

/* ── Outer wrapper ──────────────────────────────────────────────────────── */

.hhs-bmf {
	position:   relative;
	max-width:  var(--bmf-max-form);
	margin:     0 auto;
}

[x-cloak] { display: none !important; }

/* ── Step progress track ────────────────────────────────────────────────── */
/* Non-interactive by design. Flat dots + connecting line. No card affordance. */

.hhs-bmf__progress {
	display:         flex;
	align-items:     center;
	gap:             0;
	margin-bottom:   2rem;
	padding:         0;
	position:        relative;
}

.hhs-bmf__progress-track {
	display:        flex;
	align-items:    center;
	width:          100%;
	position:       relative;
}

.hhs-bmf__progress-line {
	position:   absolute;
	top:        50%;
	left:       0;
	right:      0;
	height:     1px;
	background: var(--bmf-border);
	transform:  translateY(-50%);
	z-index:    0;
}

.hhs-bmf__progress-steps {
	display:         flex;
	justify-content: space-between;
	width:           100%;
	position:        relative;
	z-index:         1;
	list-style:      none;
	margin:          0;
	padding:         0;
}

.hhs-bmf__progress-step {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            0.4rem;
}

.hhs-bmf__progress-dot {
	width:            10px;
	height:           10px;
	border-radius:    50%;
	border:           1.5px solid var(--bmf-border-strong);
	background:       var(--bmf-cream);
	transition:       background 200ms, border-color 200ms;
}

.hhs-bmf__progress-step[data-state="active"]    .hhs-bmf__progress-dot { background: var(--bmf-red);      border-color: var(--bmf-red); }
.hhs-bmf__progress-step[data-state="completed"] .hhs-bmf__progress-dot { background: var(--bmf-charcoal); border-color: var(--bmf-charcoal); }

.hhs-bmf__progress-label {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.62rem;
	font-weight:    500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          rgba(14, 14, 16, 0.45);
	white-space:    nowrap;
}

.hhs-bmf__progress-step[data-state="active"] .hhs-bmf__progress-label {
	color: var(--bmf-charcoal);
}

.hhs-bmf__progress-step[data-state="completed"] .hhs-bmf__progress-label {
	color: rgba(14, 14, 16, 0.65);
}

/* Mono datum stamp above progress */
.hhs-bmf__datum {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.65rem;
	font-weight:    500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--bmf-cyan);
	margin-bottom:  1rem;
}

/* ── Panel container ────────────────────────────────────────────────────── */

.hhs-bmf__panel {
	background:    var(--bmf-cream);
	border:        1px solid var(--bmf-border);
	border-radius: var(--bmf-radius-soft);
	padding:       var(--bmf-pad-y) var(--bmf-pad-x);
	position:      relative;
}

/* Architectural corner marks */
.hhs-bmf__panel::before,
.hhs-bmf__panel::after {
	content:      '';
	position:     absolute;
	width:        10px;
	height:       10px;
	border-color: var(--bmf-border-strong);
	border-style: solid;
}
.hhs-bmf__panel::before { top: -1px;  left: -1px;  border-width: 1.5px 0 0 1.5px; }
.hhs-bmf__panel::after  { top: -1px;  right: -1px; border-width: 1.5px 1.5px 0 0; }

/* Bottom corners via pseudo-element on the step counter */
.hhs-bmf__panel-corners-bl,
.hhs-bmf__panel-corners-br {
	position:     absolute;
	bottom:       -1px;
	width:        10px;
	height:       10px;
	border-color: var(--bmf-border-strong);
	border-style: solid;
	pointer-events: none;
}
.hhs-bmf__panel-corners-bl { left: -1px;  border-width: 0 0 1.5px 1.5px; }
.hhs-bmf__panel-corners-br { right: -1px; border-width: 0 1.5px 1.5px 0; }

/* ── Panel header ───────────────────────────────────────────────────────── */

.hhs-bmf__panel-head {
	margin-bottom: 1.75rem;
}

.hhs-bmf__panel-step {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.65rem;
	font-weight:    500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          rgba(14, 14, 16, 0.45);
	margin-bottom:  0.35rem;
}

.hhs-bmf__panel-h2 {
	font-family:    'DM Sans', sans-serif;
	font-size:      clamp(1.1rem, 2.5vw, 1.4rem);
	font-weight:    900;
	letter-spacing: -0.02em;
	color:          var(--bmf-charcoal);
	line-height:    1.2;
	margin:         0 0 0.4rem;
}

.hhs-bmf__panel-sub {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.88rem;
	color:       rgba(14, 14, 16, 0.50);
	margin:      0;
	line-height: 1.5;
}

/* ── Field groups ───────────────────────────────────────────────────────── */

.hhs-bmf__fields {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
}

.hhs-bmf__field {
	display:        flex;
	flex-direction: column;
	gap:            0.35rem;
}

.hhs-bmf__label {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.72rem;
	font-weight:    700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color:          rgba(14, 14, 16, 0.65);
}

.hhs-bmf__input {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.95rem;
	font-weight:    400;
	color:          var(--bmf-charcoal);
	background:     #fff;
	border:         1px solid var(--bmf-border-strong);
	border-radius:  var(--bmf-radius);
	padding:        0.65rem 0.85rem;
	width:          100%;
	box-sizing:     border-box;
	transition:     border-color 150ms, box-shadow 150ms;
	-webkit-appearance: none;
}

.hhs-bmf__input:focus {
	outline:      none;
	border-color: var(--bmf-charcoal);
	box-shadow:   0 0 0 2px rgba(14, 14, 16, 0.08);
}

.hhs-bmf__input::placeholder { color: rgba(14, 14, 16, 0.35); }

/* Two-col layout for city + metro on step 1 */
.hhs-bmf__fields--two-col {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1.25rem;
}

@media (max-width: 480px) {
	.hhs-bmf__fields--two-col { grid-template-columns: 1fr; }
}

/* ── Trade selector ─────────────────────────────────────────────────────── */

.hhs-bmf__trades {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.5rem;
}

.hhs-bmf__trade-btn {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.82rem;
	font-weight:    600;
	letter-spacing: 0.03em;
	color:          rgba(14, 14, 16, 0.65);
	background:     #fff;
	border:         1.5px solid var(--bmf-border-strong);
	border-radius:  var(--bmf-radius);
	padding:        0.55rem 1rem;
	cursor:         pointer;
	transition:     background 150ms, border-color 150ms, color 150ms;
	white-space:    nowrap;
}

.hhs-bmf__trade-btn[aria-pressed="true"] {
	background:   var(--bmf-charcoal);
	border-color: var(--bmf-charcoal);
	color:        #fff;
}

.hhs-bmf__trade-btn:hover:not([aria-pressed="true"]) {
	border-color: var(--bmf-charcoal);
	color:        var(--bmf-charcoal);
}

/* ── DBAI checklist ─────────────────────────────────────────────────────── */

.hhs-bmf__checklist {
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.hhs-bmf__checklist-cat {
	margin-bottom: 1.5rem;
}

.hhs-bmf__cat-label {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.6rem;
	font-weight:    500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          rgba(14, 14, 16, 0.35);
	padding-bottom: 0.5rem;
	border-bottom:  1px solid var(--bmf-border);
	margin-bottom:  0.75rem;
}

.hhs-bmf__asset-row {
	padding:        0.75rem 0;
	border-bottom:  1px solid var(--bmf-tint-04);
}

.hhs-bmf__asset-row:last-child { border-bottom: none; }

.hhs-bmf__asset-top {
	display:        flex;
	align-items:    flex-start;
	gap:            1rem;
	margin-bottom:  0.5rem;
}

.hhs-bmf__asset-name {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.88rem;
	font-weight: 600;
	color:       var(--bmf-charcoal);
	flex:        1;
	line-height: 1.3;
}

.hhs-bmf__asset-hint {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.75rem;
	color:       rgba(14, 14, 16, 0.45);
	line-height: 1.4;
	margin:      0 0 0.6rem;
}

/* Segmented state control */
.hhs-bmf__asset-states {
	display:   flex;
	gap:       0.35rem;
	flex-wrap: wrap;
}

.hhs-bmf__state-btn {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.72rem;
	font-weight:    600;
	letter-spacing: 0.02em;
	color:          rgba(14, 14, 16, 0.55);
	background:     #fff;
	border:         1.5px solid var(--bmf-border);
	border-radius:  var(--bmf-radius);
	padding:        0.38rem 0.75rem;
	cursor:         pointer;
	transition:     background 120ms, border-color 120ms, color 120ms;
	white-space:    nowrap;
}

.hhs-bmf__state-btn:hover { border-color: var(--bmf-charcoal); color: var(--bmf-charcoal); }

.hhs-bmf__state-btn[aria-pressed="true"][data-state="currently_using"] {
	background:   var(--bmf-charcoal);
	border-color: var(--bmf-charcoal);
	color:        #fff;
}

.hhs-bmf__state-btn[aria-pressed="true"][data-state="recently_stopped"] {
	background:   var(--bmf-tint-red-06);
	border-color: rgba(255, 72, 74, 0.45);
	color:        var(--bmf-red);
}

.hhs-bmf__state-btn[aria-pressed="true"][data-state="never_used"] {
	background:   var(--bmf-tint-08);
	border-color: var(--bmf-border-strong);
	color:        rgba(14, 14, 16, 0.55);
}

/* Tenure select — appears only when state === 'currently_using'.
   Deliberately prominent so operators don't miss this required field. */
.hhs-bmf__tenure-wrap {
	margin-top:    0.65rem;
	padding:       0.75rem 1rem;
	background:    rgba(95, 208, 223, 0.07);
	border:        1px solid rgba(95, 208, 223, 0.28);
	border-left:   3px solid var(--bmf-cyan);
	border-radius: 0 var(--bmf-radius-soft) var(--bmf-radius-soft) 0;
}

.hhs-bmf__tenure-wrap .hhs-bmf__label {
	color:         var(--bmf-charcoal);
	opacity:       1;
	margin-bottom: 0.4rem;
	display:       block;
}

.hhs-bmf__tenure {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.8rem;
	font-weight:    500;
	color:          var(--bmf-charcoal);
	background:     #fff;
	border:         1.5px solid var(--bmf-border-strong);
	border-radius:  var(--bmf-radius);
	padding:        0.45rem 0.75rem;
	appearance:     none;
	-webkit-appearance: none;
	cursor:         pointer;
	transition:     border-color 150ms;
	min-width:      11rem;
}

.hhs-bmf__tenure:focus { outline: none; border-color: var(--bmf-charcoal); }

/* Progress counter inside checklist panel */
.hhs-bmf__checklist-count {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.65rem;
	letter-spacing: 0.10em;
	color:          rgba(14, 14, 16, 0.45);
	margin-bottom:  1.25rem;
}

.hhs-bmf__checklist-count strong { color: var(--bmf-charcoal); }

/* ── Competitor step ────────────────────────────────────────────────────── */

.hhs-bmf__competitor-loading {
	display:     flex;
	align-items: center;
	gap:         0.75rem;
	padding:     1.5rem 0;
	color:       rgba(14, 14, 16, 0.45);
	font-family: 'DM Sans', sans-serif;
	font-size:   0.85rem;
}

.hhs-bmf__spinner {
	width:        18px;
	height:       18px;
	border:       2px solid var(--bmf-border);
	border-top:   2px solid var(--bmf-charcoal);
	border-radius: 50%;
	animation:    bmf-spin 0.7s linear infinite;
	flex-shrink:  0;
}

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

.hhs-bmf__competitor-list {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
	margin-bottom:  1.25rem;
}

.hhs-bmf__competitor-card {
	display:         flex;
	align-items:     center;
	gap:             0.75rem;
	padding:         0.75rem 1rem;
	background:      #fff;
	border:          1.5px solid var(--bmf-border);
	border-radius:   var(--bmf-radius-soft);
	cursor:          pointer;
	transition:      background 150ms, border-color 150ms, opacity 150ms;
}

.hhs-bmf__competitor-card[aria-pressed="true"] {
	border-color: var(--bmf-charcoal);
}

.hhs-bmf__competitor-card[aria-pressed="false"] {
	opacity: 0.45;
}

.hhs-bmf__competitor-check {
	width:         18px;
	height:        18px;
	border:        1.5px solid var(--bmf-border-strong);
	border-radius: 2px;
	background:    #fff;
	flex-shrink:   0;
	position:      relative;
	transition:    background 150ms, border-color 150ms;
}

.hhs-bmf__competitor-card[aria-pressed="true"] .hhs-bmf__competitor-check {
	background:   var(--bmf-charcoal);
	border-color: var(--bmf-charcoal);
}

.hhs-bmf__competitor-check::after {
	content:    '';
	position:   absolute;
	top:        3px;
	left:       5px;
	width:      5px;
	height:     9px;
	border:     2px solid #fff;
	border-top: none;
	border-left: none;
	transform:  rotate(45deg);
	opacity:    0;
	transition: opacity 150ms;
}

.hhs-bmf__competitor-card[aria-pressed="true"] .hhs-bmf__competitor-check::after { opacity: 1; }

.hhs-bmf__competitor-name {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.85rem;
	font-weight: 600;
	color:       var(--bmf-charcoal);
	flex:        1;
}

.hhs-bmf__competitor-url {
	font-family: 'JetBrains Mono', monospace;
	font-size:   0.65rem;
	color:       rgba(14, 14, 16, 0.40);
	overflow:    hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width:   12rem;
}

/* Manual competitor add */
.hhs-bmf__competitor-add {
	display:     flex;
	gap:         0.5rem;
	margin-top:  0.75rem;
	align-items: flex-start;
	flex-wrap:   wrap;
}

.hhs-bmf__competitor-add .hhs-bmf__input {
	flex: 1;
	min-width: 0;
}

.hhs-bmf__add-btn {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.8rem;
	font-weight:    700;
	letter-spacing: 0.03em;
	color:          var(--bmf-charcoal);
	background:     #fff;
	border:         1.5px solid var(--bmf-border-strong);
	border-radius:  var(--bmf-radius);
	padding:        0.65rem 1rem;
	cursor:         pointer;
	white-space:    nowrap;
	transition:     background 150ms, border-color 150ms;
}

.hhs-bmf__add-btn:hover { background: var(--bmf-tint-08); border-color: var(--bmf-charcoal); }

.hhs-bmf__competitor-error {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.75rem;
	color:       var(--bmf-red);
	margin-top:  0.35rem;
}

.hhs-bmf__competitor-min-note {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.75rem;
	color:       rgba(14, 14, 16, 0.45);
	margin-top:  0.5rem;
}

/* ── Email step ─────────────────────────────────────────────────────────── */

.hhs-bmf__email-opt {
	display:     flex;
	align-items: flex-start;
	gap:         0.75rem;
	padding:     1rem;
	background:  var(--bmf-tint-04);
	border:      1px solid var(--bmf-border);
	border-radius: var(--bmf-radius-soft);
	cursor:      pointer;
	transition:  background 150ms;
	margin-bottom: 1rem;
}

.hhs-bmf__email-opt:hover { background: var(--bmf-tint-08); }

.hhs-bmf__email-checkbox {
	width:        18px;
	height:       18px;
	border:       1.5px solid var(--bmf-border-strong);
	border-radius: 2px;
	background:   #fff;
	flex-shrink:  0;
	position:     relative;
	margin-top:   2px;
	transition:   background 150ms, border-color 150ms;
}

.hhs-bmf__email-opt.is-checked .hhs-bmf__email-checkbox {
	background:   var(--bmf-charcoal);
	border-color: var(--bmf-charcoal);
}

.hhs-bmf__email-checkbox::after {
	content:    '';
	position:   absolute;
	top: 3px; left: 5px;
	width: 5px; height: 9px;
	border: 2px solid #fff;
	border-top: none; border-left: none;
	transform: rotate(45deg);
	opacity:  0;
	transition: opacity 150ms;
}

.hhs-bmf__email-opt.is-checked .hhs-bmf__email-checkbox::after { opacity: 1; }

.hhs-bmf__email-opt-label {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.85rem;
	font-weight: 600;
	color:       var(--bmf-charcoal);
	line-height: 1.4;
}

.hhs-bmf__email-opt-sub {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.75rem;
	color:       rgba(14, 14, 16, 0.50);
	margin-top:  0.2rem;
}

.hhs-bmf__email-field {
	margin-top: 0.25rem;
}

/* Trust lines below email step */
.hhs-bmf__trust {
	margin-top:  1.25rem;
	padding-top: 1rem;
	border-top:  1px solid var(--bmf-border);
}

.hhs-bmf__trust p {
	font-family: 'DM Serif Display', serif;
	font-style:  italic;
	font-size:   0.82rem;
	color:       var(--bmf-cyan);
	line-height: 1.55;
	margin:      0 0 0.35rem;
}

/* ── Navigation row ─────────────────────────────────────────────────────── */

.hhs-bmf__nav {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      1.5rem;
	gap:             0.75rem;
}

.hhs-bmf__back {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.82rem;
	font-weight:    600;
	color:          rgba(14, 14, 16, 0.50);
	background:     transparent;
	border:         none;
	padding:        0.6rem 0;
	cursor:         pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition:     color 150ms;
}

.hhs-bmf__back:hover { color: var(--bmf-charcoal); }

/* Primary continue / submit — FH Red, never two lines */
.hhs-bmf__next,
.hhs-bmf__submit {
	display:        inline-flex;
	align-items:    center;
	gap:            0.5rem;
	font-family:    'DM Sans', sans-serif;
	font-size:      0.9rem;
	font-weight:    700;
	letter-spacing: 0.02em;
	color:          #fff;
	background:     var(--bmf-red);
	border:         none;
	border-radius:  var(--bmf-radius);
	padding:        0.75rem 1.5rem;
	cursor:         pointer;
	white-space:    nowrap;
	transition:     background 150ms, box-shadow 150ms, transform 150ms;
}

.hhs-bmf__next:hover,
.hhs-bmf__submit:hover {
	background:  #e63a3c;
	box-shadow:  0 4px 12px rgba(255, 72, 74, 0.28);
}

.hhs-bmf__next:disabled,
.hhs-bmf__submit:disabled {
	background:  rgba(14, 14, 16, 0.18);
	color:       rgba(14, 14, 16, 0.40);
	cursor:      not-allowed;
	box-shadow:  none;
}

.hhs-bmf__btn-arrow { font-size: 0.9em; transition: transform 150ms; }
.hhs-bmf__next:hover .hhs-bmf__btn-arrow,
.hhs-bmf__submit:hover .hhs-bmf__btn-arrow { transform: translateX(3px); }

/* Submit loading state */
.hhs-bmf__submit-loading {
	display:     inline-flex;
	align-items: center;
	gap:         0.5rem;
}

/* Error message */
.hhs-bmf__error {
	margin-top:  0.75rem;
	padding:     0.65rem 0.85rem;
	background:  var(--bmf-tint-red-06);
	border:      1px solid rgba(255, 72, 74, 0.20);
	border-radius: var(--bmf-radius);
	font-family: 'DM Sans', sans-serif;
	font-size:   0.82rem;
	color:       var(--bmf-red);
}

/* =============================================================================
   RESULT PAGE — .hhs-bmr-*
   Document paradigm: paginated sections, editorial hierarchy.
   Not a dashboard. Not a card grid.
   ============================================================================= */

/* ── Shell ──────────────────────────────────────────────────────────────── */

.hhs-bmr {
	background:   var(--bmr-cream);
	min-height:   100vh;
	padding-top:  var(--bmr-sticky-offset);
}

.hhs-bmr__inner {
	max-width: var(--bmr-max-content);
	margin:    0 auto;
	padding:   0 1.5rem;
}

/* ── Loading skeleton ───────────────────────────────────────────────────── */

.hhs-bmr__skeleton {
	background:    linear-gradient(90deg, rgba(14,14,16,0.05) 25%, rgba(14,14,16,0.10) 50%, rgba(14,14,16,0.05) 75%);
	background-size: 200% 100%;
	border-radius: 2px;
	animation:     bmr-shimmer 1.4s ease-in-out infinite;
}

@keyframes bmr-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.hhs-bmr__section-loading {
	padding: 3rem 0;
}

.hhs-bmr__skel-line {
	height:        1em;
	margin-bottom: 0.75rem;
	border-radius: 2px;
}

/* ── Cover section — Brand Multiple Score ───────────────────────────────── */

.hhs-bmr__cover {
	background:  var(--bmr-black);
	color:       #fff;
	padding:     3rem 0 2.5rem;
	position:    relative;
	overflow:    hidden;
}

.hhs-bmr__cover-inner {
	max-width: var(--bmr-max-content);
	margin:    0 auto;
	padding:   0 1.5rem;
}

.hhs-bmr__cover-datum {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.65rem;
	font-weight:    500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          rgba(95, 208, 223, 0.7);
	margin-bottom:  0.75rem;
}

.hhs-bmr__brand-name {
	font-family:    'DM Sans', sans-serif;
	font-size:      clamp(0.85rem, 1.5vw, 1rem);
	font-weight:    500;
	color:          rgba(255,255,255,0.55);
	margin-bottom:  0.5rem;
}

.hhs-bmr__score-lockup {
	display:     flex;
	align-items: baseline;
	gap:         0.5rem;
	margin:      0.75rem 0 1rem;
}

.hhs-bmr__score-num {
	font-family:    'DM Sans', sans-serif;
	font-size:      clamp(4rem, 10vw, 7rem);
	font-weight:    900;
	letter-spacing: -0.04em;
	line-height:    1;
	color:          #fff;
}

.hhs-bmr__score-denom {
	font-family: 'DM Sans', sans-serif;
	font-size:   clamp(1.2rem, 3vw, 2rem);
	font-weight: 400;
	color:       rgba(255,255,255,0.35);
	padding-bottom: 0.4em;
}

.hhs-bmr__band-label {
	display:        inline-block;
	font-family:    'DM Sans', sans-serif;
	font-size:      0.8rem;
	font-weight:    700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding:        0.3rem 0.75rem;
	border-radius:  999px;
	margin-bottom:  0.75rem;
}

.hhs-bmr__band-label[data-band="identity-only"]    { background: rgba(255,72,74,0.15);    color: #FF8082; }
.hhs-bmr__band-label[data-band="reputation-driven"] { background: rgba(222,204,98,0.15);   color: var(--bmr-gold); }
.hhs-bmr__band-label[data-band="brand-aware"]       { background: rgba(95,208,223,0.15);   color: var(--bmr-cyan); }
.hhs-bmr__band-label[data-band="compound-brand"]    { background: rgba(39,96,146,0.20);    color: #6BAAD4; }

.hhs-bmr__score-read {
	font-family:    'DM Serif Display', serif;
	font-style:     italic;
	font-size:      clamp(1rem, 2.2vw, 1.25rem);
	color:          rgba(255,255,255,0.75);
	max-width:      52rem;
	line-height:    1.5;
	margin-top:     0.5rem;
}

/* Score card skeleton */
.hhs-bmr__cover-skel {
	min-height: 220px;
	display:    flex;
	flex-direction: column;
	justify-content: center;
}

/* ── Section shell ──────────────────────────────────────────────────────── */

.hhs-bmr__section {
	padding:    3rem 0 2.5rem;
	border-top: 1px solid var(--bmr-border);
}

.hhs-bmr__section:first-of-type { border-top: none; }

.hhs-bmr__section--dark {
	background: var(--bmr-black);
	color:      #fff;
	border-top: none;
}

.hhs-bmr__section--dark .hhs-bmr__section-datum { color: rgba(95,208,223,0.6); }
.hhs-bmr__section--dark .hhs-bmr__section-h2    { color: #fff; }
.hhs-bmr__section--dark .hhs-bmr__section-lead  { color: rgba(255,255,255,0.7); }

.hhs-bmr__section-inner {
	max-width: var(--bmr-max-content);
	margin:    0 auto;
	padding:   0 1.5rem;
}

.hhs-bmr__section-datum {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.65rem;
	font-weight:    500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          rgba(14,14,16,0.35);
	margin-bottom:  0.5rem;
}

.hhs-bmr__section-h2 {
	font-family:    'DM Sans', sans-serif;
	font-size:      clamp(1.3rem, 3vw, 1.9rem);
	font-weight:    900;
	letter-spacing: -0.02em;
	color:          var(--bmr-charcoal);
	margin:         0 0 0.5rem;
	line-height:    1.2;
}

.hhs-bmr__section-lead {
	font-family:    'DM Sans', sans-serif;
	font-style:     normal;
	font-size:      clamp(0.95rem, 1.8vw, 1.05rem);
	color:          rgba(14, 14, 16, 0.55);
	max-width:      var(--bmr-max-readable);
	line-height:    1.6;
	margin:         0 0 1.75rem;
}

/* ── Tension card ───────────────────────────────────────────────────────── */

.hhs-bmr__tension-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1rem;
	margin-bottom:         1.5rem;
}

@media (max-width: 600px) {
	.hhs-bmr__tension-grid { grid-template-columns: 1fr; }
}

.hhs-bmr__tension-card {
	background:    var(--bmr-tint-04);
	border:        1px solid var(--bmr-border);
	border-radius: var(--bmr-radius-soft);
	padding:       1.25rem;
}

.hhs-bmr__tension-card-label {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.6rem;
	font-weight:    500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          rgba(14,14,16,0.40);
	margin-bottom:  0.4rem;
}

.hhs-bmr__tension-card-value {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.95rem;
	font-weight: 700;
	color:       var(--bmr-charcoal);
	line-height: 1.3;
}

.hhs-bmr__tension-summary {
	font-family:    'DM Serif Display', serif;
	font-style:     italic;
	font-size:      1rem;
	color:          var(--bmr-charcoal);
	line-height:    1.55;
	padding:        1rem 1.25rem;
	border-left:    3px solid var(--bmr-red);
	background:     var(--bmr-tint-red-06);
	border-radius:  0 var(--bmr-radius-soft) var(--bmr-radius-soft) 0;
}

/* ── Equity audit ───────────────────────────────────────────────────────── */

.hhs-bmr__equity-top {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1.5rem;
	margin-bottom:         1.75rem;
}

@media (max-width: 640px) {
	.hhs-bmr__equity-top { grid-template-columns: 1fr; }
}

.hhs-bmr__dbai-score {
	font-family:    'DM Sans', sans-serif;
	font-size:      clamp(3rem, 7vw, 5rem);
	font-weight:    900;
	letter-spacing: -0.03em;
	color:          var(--bmr-charcoal);
	line-height:    1;
}

.hhs-bmr__dbai-band {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.75rem;
	font-weight:    700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color:          rgba(14,14,16,0.50);
	margin-top:     0.35rem;
}

.hhs-bmr__equity-table {
	width:          100%;
	border-collapse: collapse;
	font-family:    'DM Sans', sans-serif;
	font-size:      0.85rem;
}

.hhs-bmr__equity-table th {
	font-size:      0.62rem;
	font-weight:    700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color:          rgba(14,14,16,0.40);
	text-align:     left;
	padding:        0 0 0.5rem;
	border-bottom:  1px solid var(--bmr-border-strong);
}

.hhs-bmr__equity-table td {
	padding:       0.55rem 0.75rem 0.55rem 0;
	border-bottom: 1px solid var(--bmr-border);
	color:         var(--bmr-charcoal);
	vertical-align: middle;
}

.hhs-bmr__equity-table td:last-child {
	color:          rgba(14,14,16,0.45);
	font-size:      0.78rem;
}

.hhs-bmr__reinvestigate {
	margin-top:     1.25rem;
	padding:        1rem 1.25rem;
	background:     rgba(222,204,98,0.10);
	border:         1px solid rgba(222,204,98,0.30);
	border-radius:  var(--bmr-radius-soft);
}

.hhs-bmr__reinvestigate-label {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.6rem;
	font-weight:    500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          rgba(14,14,16,0.45);
	margin-bottom:  0.4rem;
}

.hhs-bmr__reinvestigate-body {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.85rem;
	color:       var(--bmr-charcoal);
	line-height: 1.45;
}

/* ── Recommended lane ───────────────────────────────────────────────────── */

.hhs-bmr__lane-rec {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.65rem;
	font-weight:    500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--bmr-cyan);
	margin-bottom:  0.35rem;
}

.hhs-bmr__lane-name {
	font-family:    'DM Sans', sans-serif;
	font-size:      clamp(1.2rem, 2.8vw, 1.7rem);
	font-weight:    900;
	letter-spacing: -0.02em;
	color:          #fff;
	margin:         0 0 1rem;
}

.hhs-bmr__lane-body {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.95rem;
	color:          rgba(255,255,255,0.80);
	line-height:    1.65;
	max-width:      var(--bmr-max-readable);
}

/* ── Three Horizons ─────────────────────────────────────────────────────── */

.hhs-bmr__horizons {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   1rem;
	margin-top:            1.5rem;
}

@media (max-width: 700px) {
	.hhs-bmr__horizons { grid-template-columns: 1fr; }
}

.hhs-bmr__horizon {
	background:    var(--bmr-tint-04);
	border:        1px solid var(--bmr-border);
	border-radius: var(--bmr-radius-soft);
	padding:       1.25rem;
}

.hhs-bmr__horizon-period {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.6rem;
	font-weight:    500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--bmr-red);
	margin-bottom:  0.6rem;
}

.hhs-bmr__horizon ul {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        0.65rem;
}

.hhs-bmr__horizon li {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.88rem;
	color:       var(--bmr-charcoal);
	line-height: 1.45;
	padding-left: 0.85rem;
	position:    relative;
}

.hhs-bmr__horizon li::before {
	content:    '—';
	position:   absolute;
	left:       0;
	color:      rgba(14,14,16,0.30);
}

/* ── Phase-1 stub callout ───────────────────────────────────────────────── */

.hhs-bmr__phase-note {
	display:     flex;
	align-items: flex-start;
	gap:         0.6rem;
	padding:     0.85rem 1rem;
	background:  rgba(95,208,223,0.06);
	border:      1px solid rgba(95,208,223,0.20);
	border-radius: var(--bmr-radius-soft);
	margin-top:  1.5rem;
}

.hhs-bmr__phase-note-icon { font-size: 0.9rem; flex-shrink: 0; margin-top: 1px; }

.hhs-bmr__phase-note-text {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.78rem;
	color:       rgba(14,14,16,0.55);
	line-height: 1.45;
}

/* ── Walkthrough CTA ────────────────────────────────────────────────────── */

.hhs-bmr__walkthrough {
	padding:       3rem 0;
	background:    var(--bmr-red);
	text-align:    center;
}

.hhs-bmr__walkthrough-inner {
	max-width: 48rem;
	margin:    0 auto;
	padding:   0 1.5rem;
}

.hhs-bmr__walkthrough-eyebrow {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.65rem;
	font-weight:    500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          rgba(255,255,255,0.65);
	margin-bottom:  0.6rem;
}

.hhs-bmr__walkthrough-h2 {
	font-family:    'DM Sans', sans-serif;
	font-size:      clamp(1.3rem, 3vw, 1.9rem);
	font-weight:    900;
	letter-spacing: -0.02em;
	color:          #fff;
	margin:         0 0 0.6rem;
}

.hhs-bmr__walkthrough-body {
	font-family:    'DM Serif Display', serif;
	font-style:     italic;
	font-size:      1rem;
	color:          rgba(255,255,255,0.80);
	margin-bottom:  1.5rem;
	line-height:    1.55;
}

.hhs-bmr__walkthrough-cta {
	display:     inline-flex;
	align-items: center;
	gap:         0.5rem;
	font-family: 'DM Sans', sans-serif;
	font-size:   0.95rem;
	font-weight: 700;
	color:       var(--bmr-red);
	background:  #fff;
	border:      none;
	border-radius: var(--bmr-radius);
	padding:     0.85rem 1.75rem;
	text-decoration: none;
	transition:  background 150ms, box-shadow 150ms;
	white-space: nowrap;
}

.hhs-bmr__walkthrough-cta:hover {
	background:  #f5f2eb;
	box-shadow:  0 6px 20px rgba(0,0,0,0.18);
}

/* =============================================================================
   DARK SECTION — child element contrast fixes
   All .hhs-bmr__section--dark children that carry charcoal-default colors
   need explicit light overrides. Inline styles in the template must NOT set
   charcoal colors inside dark sections — use these class selectors instead.
   ============================================================================= */

.hhs-bmr__section--dark .hhs-bmr__horizon {
	background:   rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.12);
}

.hhs-bmr__section--dark .hhs-bmr__horizon li {
	color: rgba(255, 255, 255, 0.80);
}

.hhs-bmr__section--dark .hhs-bmr__horizon li::before {
	color: rgba(255, 255, 255, 0.25);
}

/* Lane section lives inside a dark section */
.hhs-bmr__section--dark .hhs-bmr__lane-body {
	color: rgba(255, 255, 255, 0.80);
}

/* Phase note inside dark sections */
.hhs-bmr__section--dark .hhs-bmr__phase-note {
	background:   rgba(95, 208, 223, 0.07);
	border-color: rgba(95, 208, 223, 0.16);
}

.hhs-bmr__section--dark .hhs-bmr__phase-note-text {
	color: rgba(255, 255, 255, 0.50);
}

/* =============================================================================
   LOADING SCREEN — .hhs-bm-loader
   Full-viewport overlay shown during the 10-second analysis sequence.
   ============================================================================= */

.hhs-bm-loader {
	position:        fixed;
	inset:           0;
	z-index:         900;
	background:      var(--bmf-cream);
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             2rem;
	padding:         2rem;
}

.hhs-bm-loader__hippo {
	width:     100px;
	height:    100px;
	object-fit: contain;
	animation: bm-hippo-float 2.2s ease-in-out infinite;
}

@keyframes bm-hippo-float {
	0%, 100% { transform: translateY(0) scale(1); }
	50%       { transform: translateY(-10px) scale(1.02); }
}

.hhs-bm-loader__eyebrow {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.6rem;
	font-weight:    500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color:          rgba(14, 14, 16, 0.35);
	text-align:     center;
}

.hhs-bm-loader__message {
	font-family: 'DM Serif Display', serif;
	font-style:  italic;
	font-size:   clamp(1rem, 2.5vw, 1.2rem);
	color:       var(--bmf-charcoal);
	text-align:  center;
	max-width:   28rem;
	line-height: 1.5;
	min-height:  2.5em;
}

.hhs-bm-loader__track {
	width:         200px;
	height:        2px;
	background:    var(--bmf-border);
	border-radius: 1px;
	overflow:      hidden;
}

.hhs-bm-loader__fill {
	height:           100%;
	background:       var(--bmf-red);
	border-radius:    1px;
	transition:       width 1.2s linear;
	width:            0%;
}

/* =============================================================================
   ARCHETYPE TILES — .hhs-bmr__archetype-*
   Eight flavor cards showing what each brand pattern looks like visually.
   These use their own color language (not HHS palette) to show the operator
   what each archetype's visual world feels like.
   ============================================================================= */

.hhs-bmr__archetype-intro {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.88rem;
	color:          rgba(255, 255, 255, 0.60);
	line-height:    1.55;
	max-width:      44rem;
	margin-bottom:  1.5rem;
}

.hhs-bmr__archetype-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   0.65rem;
	margin-bottom:         1.5rem;
}

@media (max-width: 900px) {
	.hhs-bmr__archetype-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 600px) {
	.hhs-bmr__archetype-grid { grid-template-columns: repeat(2, 1fr); }
}

.hhs-bmr__archetype-tile {
	padding:       0.85rem 0.85rem 0.75rem;
	border:        1px solid;
	border-radius: var(--bmr-radius-soft);
	position:      relative;
	cursor:        default;
	transition:    transform 150ms, box-shadow 150ms;
}

.hhs-bmr__archetype-tile--assigned {
	box-shadow: 0 0 0 2px rgba(255, 72, 74, 0.55);
}

.hhs-bmr__archetype-tile--assigned::after {
	content:        'Your pattern';
	position:       absolute;
	top:            -9px;
	right:          6px;
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.52rem;
	font-weight:    500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	background:     var(--bmr-red);
	color:          #fff;
	padding:        2px 6px;
	border-radius:  999px;
	white-space:    nowrap;
}

.hhs-bmr__archetype-name {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.82rem;
	font-weight:    900;
	letter-spacing: -0.01em;
	line-height:    1.1;
	margin-bottom:  0.25rem;
}

.hhs-bmr__archetype-descriptor {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.65rem;
	line-height: 1.35;
	opacity:     0.65;
	margin-bottom: 0.6rem;
}

.hhs-bmr__archetype-swatches {
	display: flex;
	gap:     3px;
}

.hhs-bmr__archetype-swatch {
	width:         12px;
	height:        12px;
	border-radius: 50%;
	border:        1px solid rgba(0, 0, 0, 0.12);
	flex-shrink:   0;
}

/* =============================================================================
   LANE GRID — .hhs-bmr__lane-grid-*
   Visual competitive map showing all 8 positioning lanes, which are occupied,
   which are open, and which the operator should consider.
   ============================================================================= */

.hhs-bmr__lane-grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   0.65rem;
	margin:                1.5rem 0;
}

@media (max-width: 700px) {
	.hhs-bmr__lane-grid { grid-template-columns: repeat(2, 1fr); }
}

.hhs-bmr__lane-tile {
	padding:       1rem;
	background:    var(--bmr-tint-04);
	border:        1px solid var(--bmr-border);
	border-radius: var(--bmr-radius-soft);
	position:      relative;
	transition:    background 150ms, border-color 150ms;
}

.hhs-bmr__lane-tile[data-recommended="true"] {
	background:   rgba(255, 72, 74, 0.06);
	border-color: rgba(255, 72, 74, 0.35);
}

.hhs-bmr__lane-tile[data-open="true"]:not([data-recommended="true"]) {
	opacity: 0.55;
}

.hhs-bmr__lane-tile-name {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.82rem;
	font-weight:    700;
	color:          var(--bmr-charcoal);
	margin-bottom:  0.3rem;
	line-height:    1.2;
}

.hhs-bmr__lane-tile-desc {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.65rem;
	color:       rgba(14, 14, 16, 0.45);
	line-height: 1.35;
	margin-bottom: 0.6rem;
}

.hhs-bmr__lane-tile-badge {
	display:        inline-block;
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.52rem;
	font-weight:    500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding:        2px 7px;
	border-radius:  999px;
	white-space:    nowrap;
}

.hhs-bmr__lane-tile-badge--open {
	background: rgba(95, 208, 223, 0.12);
	color:      rgba(14, 14, 16, 0.55);
}

.hhs-bmr__lane-tile-badge--occupied {
	background: var(--bmr-tint-08);
	color:      rgba(14, 14, 16, 0.45);
}

.hhs-bmr__lane-tile-badge--recommended {
	background: var(--bmr-red);
	color:      #fff;
}

/* Competitor count inside lane tile */
.hhs-bmr__lane-tile-comp {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.58rem;
	letter-spacing: 0.08em;
	color:          rgba(14, 14, 16, 0.35);
	margin-top:     0.35rem;
}

/* =============================================================================
   COMPETITOR STEP — manual-first UX improvements
   ============================================================================= */

.hhs-bmf__comp-guidance {
	font-family:   'DM Sans', sans-serif;
	font-size:     0.88rem;
	color:         rgba(14, 14, 16, 0.50);
	line-height:   1.55;
	margin-bottom: 1.25rem;
}

.hhs-bmf__comp-empty {
	padding:       1.5rem;
	border:        1.5px dashed var(--bmf-border-strong);
	border-radius: var(--bmf-radius-soft);
	text-align:    center;
	margin-bottom: 1rem;
}

.hhs-bmf__comp-empty p {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.82rem;
	color:       rgba(14, 14, 16, 0.40);
	line-height: 1.45;
	margin:      0;
}

/* Manual add field — more prominent placement */
.hhs-bmf__comp-add-label {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.72rem;
	font-weight:    700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color:          var(--bmf-charcoal);
	margin-bottom:  0.4rem;
	display:        block;
}

/* Confirmed competitor remove button */
.hhs-bmf__comp-remove {
	background:  transparent;
	border:      none;
	cursor:      pointer;
	padding:     0 0 0 0.5rem;
	color:       rgba(14, 14, 16, 0.30);
	font-size:   0.85rem;
	line-height: 1;
	transition:  color 150ms;
	flex-shrink: 0;
}

.hhs-bmf__comp-remove:hover { color: var(--bmf-red); }

/* Card layout — div-based in manual-first UX */
.hhs-bmf__competitor-card {
	justify-content: space-between;
	cursor:          default;
}

.hhs-bmf__competitor-info {
	display:        flex;
	flex-direction: column;
	gap:            0.2rem;
	min-width:      0;
}

/* Remove aria-pressed dimming (cards are always confirmed) */
.hhs-bmf__competitor-card[aria-pressed="false"] { opacity: 1; }

/* Wrapper adds breathing room above the add input */
.hhs-bmf__comp-add-wrap {
	margin-top: 1.25rem;
}

/* =============================================================================
   GRADE STRIP — .hhs-bmr__grade-strip
   Three-cell data strip inside the cover: DBAI score | current signal | direction.
   ============================================================================= */

.hhs-bmr__grade-strip {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   0;
	margin-top:            2rem;
	border:                1px solid rgba(255, 255, 255, 0.12);
	border-radius:         4px;
	overflow:              hidden;
}

.hhs-bmr__grade-cell {
	padding:      1rem 1.25rem;
	border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.hhs-bmr__grade-cell:last-child { border-right: none; }

.hhs-bmr__grade-label {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.55rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          rgba(95, 208, 223, 0.55);
	margin:         0 0 0.35rem;
}

.hhs-bmr__grade-value {
	font-family: 'DM Sans', sans-serif;
	font-size:   clamp(0.88rem, 1.5vw, 1rem);
	font-weight: 700;
	color:       rgba(255, 255, 255, 0.90);
	line-height: 1.2;
	margin:      0 0 0.2rem;
}

.hhs-bmr__grade-sub {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.72rem;
	color:       rgba(255, 255, 255, 0.45);
	margin:      0;
}

@media (max-width: 600px) {
	.hhs-bmr__grade-strip {
		grid-template-columns: 1fr 1fr;
	}
	.hhs-bmr__grade-cell:nth-child(2) {
		border-right: none;
	}
	.hhs-bmr__grade-cell:nth-child(3) {
		grid-column: 1 / -1;
		border-right: none;
		border-top: 1px solid rgba(14, 14, 16, 0.10);
	}
}

/* =============================================================================
   COLLAPSIBLE DBAI DETAIL — .hhs-bmr__dbai-detail
   ============================================================================= */

.hhs-bmr__dbai-detail {
	margin-top:    1.5rem;
	border:        1px solid rgba(255, 255, 255, 0.22);
	border-radius: 4px;
	overflow:      hidden;
}

.hhs-bmr__dbai-summary {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	font-family:     'JetBrains Mono', monospace;
	font-size:       0.7rem;
	letter-spacing:  0.10em;
	text-transform:  uppercase;
	color:           rgba(95, 208, 223, 0.85);
	padding:         0.85rem 1rem;
	cursor:          pointer;
	list-style:      none;
	user-select:     none;
	transition:      background 0.15s ease, color 0.15s ease;
}
.hhs-bmr__dbai-summary:hover {
	background: rgba(255, 255, 255, 0.06);
	color:      rgba(95, 208, 223, 1);
}
.hhs-bmr__dbai-summary::-webkit-details-marker { display: none; }
.hhs-bmr__dbai-summary::after {
	content:     '▾';
	font-size:   0.8rem;
	line-height: 1;
	transition:  transform 0.2s ease;
	color:       rgba(95, 208, 223, 0.55);
}
details[open] .hhs-bmr__dbai-summary::after { transform: rotate(180deg); }

.hhs-bmr__dbai-detail .hhs-bmr__equity-table {
	margin:        0;
	border-radius: 0;
	border-top:    1px solid rgba(255, 255, 255, 0.08);
}
.hhs-bmr__dbai-detail .hhs-bmr__equity-table thead th {
	color:            rgba(255, 255, 255, 0.40);
	border-bottom:    1px solid rgba(255, 255, 255, 0.08);
}
.hhs-bmr__dbai-detail .hhs-bmr__equity-table tbody tr {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hhs-bmr__dbai-detail .hhs-bmr__equity-table td {
	color: rgba(255, 255, 255, 0.65);
}

.hhs-bmr__dbai-detail .hhs-bmr__reinvestigate {
	margin:        0;
	border-top:    1px solid rgba(255, 255, 255, 0.08);
	border-radius: 0;
	background:    rgba(255, 255, 255, 0.04);
}
.hhs-bmr__dbai-detail .hhs-bmr__reinvestigate-label {
	color: rgba(255, 255, 255, 0.55);
}
.hhs-bmr__dbai-detail .hhs-bmr__reinvestigate-body {
	color: rgba(255, 255, 255, 0.40);
}

/* =============================================================================
   DARK LANE GRID — .hhs-bmr__lane-grid--dark
   Lane grid inside a dark section needs adjusted colors.
   ============================================================================= */

.hhs-bmr__lane-grid--dark .hhs-bmr__lane-tile {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.10);
}

.hhs-bmr__lane-grid--dark .hhs-bmr__lane-tile[data-recommended="true"] {
	background:   rgba(255, 72, 74, 0.12);
	border-color: rgba(255, 72, 74, 0.40);
}

.hhs-bmr__lane-grid--dark .hhs-bmr__lane-tile[data-open="true"]:not([data-recommended="true"]) {
	opacity: 0.60;
}

.hhs-bmr__lane-grid--dark .hhs-bmr__lane-tile-name {
	color: rgba(255, 255, 255, 0.90);
}

.hhs-bmr__lane-grid--dark .hhs-bmr__lane-tile-desc {
	color: rgba(255, 255, 255, 0.45);
}

.hhs-bmr__lane-grid--dark .hhs-bmr__lane-tile-comp {
	color: rgba(255, 255, 255, 0.35);
}

.hhs-bmr__lane-grid--dark .hhs-bmr__lane-tile-badge--open {
	background: rgba(95, 208, 223, 0.18);
	color:      rgba(255, 255, 255, 0.80);
}

.hhs-bmr__lane-grid--dark .hhs-bmr__lane-tile-badge--occupied {
	background: rgba(255, 255, 255, 0.10);
	color:      rgba(255, 255, 255, 0.55);
}

/* =============================================================================
   BRAND PLATFORM PREVIEW — .hhs-bmr__bp-*
   Brand expression mockup panel — archetype rendered in its own visual language.
   ============================================================================= */

.hhs-bmr__expression {
	margin:        2rem 0 1.5rem;
	border-radius: 6px;
	padding:       2.5rem 2rem 2rem;
	overflow:      hidden;
}

.hhs-bmr__expression-label {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin:         0 0 1.25rem;
	opacity:        0.70;
}

/* Voice zone */
.hhs-bmr__expression-voice {
	padding-bottom: 2rem;
}

.hhs-bmr__expression-headline {
	font-family: 'DM Serif Display', serif;
	font-size:   clamp( 2rem, 4vw, 3.25rem );
	line-height: 1.12;
	margin:      0 0 1rem;
	max-width:   26ch;
}

.hhs-bmr__expression-headline--sans-bold {
	font-family:    'DM Sans', sans-serif;
	font-weight:    900;
	letter-spacing: -0.025em;
	font-style:     normal;
	line-height:    1.05;
}
.hhs-bmr__expression-headline--sans-medium {
	font-family:    'DM Sans', sans-serif;
	font-weight:    600;
	letter-spacing: -0.01em;
	font-style:     normal;
}
.hhs-bmr__expression-headline--sans-light {
	font-family:    'DM Sans', sans-serif;
	font-weight:    300;
	letter-spacing: 0.02em;
	font-style:     normal;
}
.hhs-bmr__expression-headline--serif {
	font-family: 'DM Serif Display', serif;
	font-weight: normal;
	font-style:  italic;
}

.hhs-bmr__expression-copy {
	font-family: 'DM Sans', sans-serif;
	font-size:   clamp( 0.88rem, 1.6vw, 0.95rem );
	line-height: 1.55;
	margin:      0;
	max-width:   44ch;
	opacity:     0.80;
}

/* Archetype visual gallery — FH portfolio reference */
.hhs-bmr__expression-gallery {
	margin-bottom:  2rem;
	padding-bottom: 1.75rem;
	border-bottom:  1px solid rgba(255, 255, 255, 0.10);
}
.hhs-bmr__expression-gallery-grid {
	display:               grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows:    1fr 1fr;
	gap:                   4px;
	margin:                0.75rem 0 0.6rem;
	border-radius:         3px;
	overflow:              hidden;
}
.hhs-bmr__expression-gallery-main {
	grid-row:     1 / 3;
	overflow:     hidden;
	aspect-ratio: 3 / 2;
}
.hhs-bmr__expression-gallery-sec {
	overflow:     hidden;
	aspect-ratio: 3 / 2;
}
.hhs-bmr__expression-gallery-main img,
.hhs-bmr__expression-gallery-sec img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform 0.5s ease;
}
.hhs-bmr__expression-gallery-main:hover img,
.hhs-bmr__expression-gallery-sec:hover img {
	transform: scale(1.04);
}
.hhs-bmr__expression-gallery-credit {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.56rem;
	letter-spacing: 0.08em;
	margin:         0.5rem 0 0;
	opacity:        0.45;
}
.hhs-bmr__expression-gallery-credit a {
	text-decoration: none;
	color:           inherit;
}
.hhs-bmr__expression-gallery-credit a:hover {
	opacity:         1;
	text-decoration: underline;
}
@media ( max-width: 560px ) {
	.hhs-bmr__expression-gallery-grid {
		grid-template-columns: 1fr;
		grid-template-rows:    auto;
	}
	.hhs-bmr__expression-gallery-main {
		grid-row: auto;
	}
}

/* Archetype color palette strip */
.hhs-bmr__expression-palette {
	padding:     1.75rem 0 1.5rem;
	border-top:  1px solid rgba(255, 255, 255, 0.10);
}

.hhs-bmr__expression-palette-label {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.58rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin:         0 0 1rem;
	opacity:        0.60;
}

.hhs-bmr__expression-palette-swatches {
	display:   flex;
	gap:       1.5rem;
	flex-wrap: wrap;
}

.hhs-bmr__expression-palette-swatch {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            0.35rem;
}

.hhs-bmr__expression-palette-dot {
	width:         2.75rem;
	height:        2.75rem;
	border-radius: 50%;
	border:        1px solid rgba(255, 255, 255, 0.18);
	flex-shrink:   0;
}

.hhs-bmr__expression-palette-name {
	font-family:    'DM Sans', sans-serif;
	font-size:      0.68rem;
	font-weight:    600;
	letter-spacing: 0;
	white-space:    nowrap;
	opacity:        0.75;
}

.hhs-bmr__expression-palette-hex {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.56rem;
	letter-spacing: 0.04em;
	white-space:    nowrap;
	opacity:        0.50;
	text-transform: uppercase;
}

/* Context zone */
.hhs-bmr__expression-context {
	display:         grid;
	grid-template-columns: 1fr 1fr;
	gap:             2rem;
	padding-top:     1.75rem;
	margin-top:      0;
}

@media ( max-width: 640px ) {
	.hhs-bmr__expression-context {
		grid-template-columns: 1fr;
		gap:                   1.25rem;
	}
}

.hhs-bmr__expression-context-label {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.60rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin:         0 0 1rem;
	opacity:        0.60;
}

/* References */
.hhs-bmr__expression-refs {
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.hhs-bmr__expression-ref {
	padding:       0.65rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hhs-bmr__expression-ref:last-child { border-bottom: none; }

.hhs-bmr__expression-ref-name {
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	font-size:   0.88rem;
	margin:      0 0 0.2rem;
}

.hhs-bmr__expression-ref-note {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.80rem;
	line-height: 1.5;
	margin:      0;
	opacity:     0.55;
}

/* Visual language */
.hhs-bmr__expression-visual-body {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.90rem;
	line-height: 1.65;
	margin:      0;
	opacity:     0.70;
	font-style:  italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
   The mini brand platform block inside Act 3 (prescription).
   ============================================================================= */

.hhs-bmr__bp {
	margin:        2rem 0 0;
	padding:       1.75rem;
	background:    rgba(255, 255, 255, 0.05);
	border:        1px solid rgba(255, 255, 255, 0.12);
	border-radius: 4px;
}

.hhs-bmr__bp-promise-label {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.55rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          rgba(95, 208, 223, 0.60);
	margin:         0 0 0.5rem;
}

.hhs-bmr__bp-promise {
	font-family:    'DM Sans', sans-serif;
	font-size:      clamp(1.1rem, 2.5vw, 1.4rem);
	font-weight:    700;
	color:          #fff;
	line-height:    1.3;
	letter-spacing: -0.01em;
	margin:         0 0 1.75rem;
}

.hhs-bmr__bp-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1.5rem;
	margin-bottom:         1.75rem;
}

@media (max-width: 580px) {
	.hhs-bmr__bp-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

.hhs-bmr__bp-col-label {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.55rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          rgba(95, 208, 223, 0.50);
	margin:         0 0 0.4rem;
}

.hhs-bmr__bp-attrs {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.88rem;
	font-weight: 600;
	color:       rgba(255, 255, 255, 0.85);
	line-height: 1.5;
	margin:      0 0 0.3rem;
}

.hhs-bmr__bp-not {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.78rem;
	color:       rgba(255, 255, 255, 0.30);
	line-height: 1.5;
	margin:      0;
}

.hhs-bmr__bp-speaks-label {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.55rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          rgba(95, 208, 223, 0.50);
	margin:         0 0 0.5rem;
}

.hhs-bmr__bp-speaks {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.88rem;
	color:       rgba(255, 255, 255, 0.60);
	line-height: 1.65;
	margin:      0;
	max-width:   52rem;
}

/* ── Phase 2: Strategic rationale block (ACT 3, dark context) ──────────── */

.hhs-bmr__strategic-rationale {
	margin: 1.5rem 0 2rem;
}

.hhs-bmr__strategic-rationale-body {
	font-family: 'DM Sans', sans-serif;
	font-size:   0.92rem;
	color:       rgba(255, 255, 255, 0.72);
	line-height: 1.65;
	margin:      0.4rem 0 0;
	max-width:   52rem;
}

/* =============================================================================
   COMPETITOR STEP. Auto-suggest UX (v1.14.7)
   Surfaces top-reviewed operators per metro; user confirms or unchecks.
   ============================================================================= */

.hhs-bmf__comp-loading {
	display:        flex;
	align-items:    center;
	gap:            0.75rem;
	padding:        1.5rem 0;
	color:          rgba(14, 14, 16, 0.55);
	font-family:    'DM Sans', sans-serif;
	font-size:      0.85rem;
}

.hhs-bmf__comp-loading p { margin: 0; }

.hhs-bmf__comp-load-error {
	padding:        0.75rem 1rem;
	background:     var(--bmf-tint-04);
	border:         1px solid var(--bmf-border);
	border-radius:  var(--bmf-radius-soft);
	font-family:    'DM Sans', sans-serif;
	font-size:      0.82rem;
	color:          rgba(14, 14, 16, 0.65);
	margin-bottom:  1.25rem;
}

.hhs-bmf__comp-load-error p { margin: 0; }

/* Native checkbox inside the card */
.hhs-bmf__competitor-check {
	width:         18px;
	height:        18px;
	margin:        0.2rem 0 0;
	accent-color:  var(--bmf-charcoal);
	border:        none;
	background:    transparent;
	flex-shrink:   0;
	cursor:        pointer;
	position:      static;
	appearance:    auto;
	-webkit-appearance: auto;
}

.hhs-bmf__competitor-check::after { content: none; }

/* Card states driven by .is-confirmed / .is-unconfirmed (Alpine binding) */
.hhs-bmf__competitor-card {
	align-items:     flex-start;
	cursor:          pointer;
	justify-content: flex-start;
}

.hhs-bmf__competitor-card.is-confirmed {
	border-color: var(--bmf-charcoal);
	background:   #fff;
}

.hhs-bmf__competitor-card.is-unconfirmed {
	opacity:    0.55;
	background: var(--bmf-tint-04);
}

.hhs-bmf__competitor-card:hover { border-color: var(--bmf-border-strong); }

/* Meta line: review count + rating */
.hhs-bmf__competitor-meta {
	font-family:    'JetBrains Mono', monospace;
	font-size:      0.7rem;
	color:          rgba(14, 14, 16, 0.55);
	letter-spacing: 0.02em;
	display:        inline-flex;
	gap:            0.5rem;
	flex-wrap:      wrap;
}

.hhs-bmf__competitor-rating {
	color:       var(--bmf-charcoal);
	font-weight: 700;
}

/* Balance the meta line with a slightly larger name and a wider URL */
.hhs-bmf__competitor-name { font-size: 0.9rem; }
.hhs-bmf__competitor-url  { max-width: none; }