/* ============================================================
   BLANKET BASE — reset, typography, shared components.
   Tokens only: every value references tokens.css variables.
   Pages add page.css for page-specific layout ONLY — never
   restyle a shared component there.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  overflow-x: clip;
  font-family: var(--bh-font-body);
  font-size: var(--bh-fs-body);
  line-height: var(--bh-lh-body);
  color: var(--bh-body);
  background: var(--bh-bg);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
/* :where() keeps this at zero specificity so component margins always win (QC F1) */
:where(ul[class], ol[class], .bh-footer ul, .bh-dropdown ul, .bh-mobile-menu ul) {
  list-style: none; padding: 0; margin: 0;
}

/* ---------- Accessibility ---------- */
.bh-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--bh-ink); color: var(--bh-white);
  padding: var(--bh-space-12) var(--bh-space-20); border-radius: 0 0 var(--bh-r-12) 0;
}
.bh-skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--bh-color-deep-purple); outline-offset: 2px; }
.bh-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Film grain overlay (signature) ----------
   Page-wide subtle grain above backgrounds, below content.
   The grain png tiles; content sits in stacking contexts above it. */
.bh-grain::before {
  content: ''; position: fixed; inset: 0; z-index: var(--bh-z-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.45; mix-blend-mode: multiply; pointer-events: none; /* Figma grain fill opacity 0.45 */
  animation: bh-grain-in var(--bh-dur-enter) var(--bh-ease) both;
}
@keyframes bh-grain-in { from { opacity: 0; } }
/* Nav strip carries its own grain layer (Figma: identical grain inside the 84px bar) */
.bh-nav { position: relative; }
.bh-nav::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.45; mix-blend-mode: multiply; pointer-events: none; /* Figma grain fill opacity 0.45 */
  animation: bh-grain-in var(--bh-dur-enter) var(--bh-ease) both;
}
.bh-nav-inner { position: relative; z-index: 1; }
main, header, footer { position: relative; z-index: 2; }

/* ---------- Layout primitives ---------- */
.bh-container {
  width: min(var(--bh-content-width), 100% - 2 * var(--bh-m-page-margin));
  margin-inline: auto;
}
.bh-narrow { width: min(var(--bh-narrow-width), 100%); margin-inline: auto; }
.bh-section { padding-block: calc(var(--bh-section-rhythm) / 2); }
@media (max-width: 767px) {
  .bh-section { padding-block: calc(var(--bh-m-section-rhythm) / 2); }
}

/* ---------- Typography ---------- */
h1, h2, h3, .bh-display {
  font-family: var(--bh-font-display);
  font-weight: var(--bh-w-black);
  color: var(--bh-ink);
  line-height: var(--bh-lh-heading);
  text-wrap: balance;
}
p, li, dd { text-wrap: pretty; }
.trust-line, .proof-stat, .stat-num, .story-stat, .result-num, .bh-count, .blog-meta, .featured-meta, time { font-variant-numeric: tabular-nums; }
.bh-count { display: inline-block; text-align: right; }
.bh-hero-headline {
  font-size: var(--bh-fs-hero-centered);
  letter-spacing: var(--bh-ls-hero-centered);
  line-height: var(--bh-lh-tight);
}
.bh-hero-headline--split {
  font-size: var(--bh-fs-hero-split);
  letter-spacing: var(--bh-ls-hero-split);
}
.bh-h2 { font-size: var(--bh-fs-h2); letter-spacing: var(--bh-ls-h2); }
.bh-h3 { font-size: var(--bh-fs-h3); letter-spacing: var(--bh-ls-h3); }
.bh-h4 { font-size: var(--bh-fs-h4); letter-spacing: var(--bh-ls-h4); }
.bh-lead { font-size: var(--bh-fs-lead); line-height: var(--bh-lh-lead); }
.bh-fine { font-size: var(--bh-fs-fine); }
@media (max-width: 767px) {
  .bh-hero-headline, .bh-hero-headline--split { font-size: var(--bh-m-fs-hero); letter-spacing: -1.2px; }
  .bh-h2 { font-size: var(--bh-m-fs-h2); letter-spacing: -0.5px; }
  .bh-h3 { font-size: var(--bh-m-fs-h3); letter-spacing: -0.5px; }
  .bh-lead { font-size: var(--bh-m-fs-lead); }
  body { font-size: var(--bh-m-fs-body); }
}

/* On-dark text helpers */
.bh-on-dark { color: var(--bh-white); }
.bh-on-dark p, .bh-on-dark .bh-body { color: var(--bh-body-on-dark); }
/* h1/h2/h3 default to --bh-ink at equal specificity, which beats inherited
   color — without this, .bh-on-dark never actually reaches a heading. */
.bh-on-dark h1, .bh-on-dark h2, .bh-on-dark h3 { color: var(--bh-white); }

/* ---------- Eyebrow + section header ---------- */
.bh-eyebrow {
  font-family: var(--bh-font-body);
  font-weight: var(--bh-w-xbold);
  font-size: var(--bh-fs-eyebrow);
  letter-spacing: var(--bh-ls-eyebrow);
  text-transform: uppercase;
  color: var(--bh-accent);
}
.bh-section-header {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--bh-space-16);
  max-width: 1060px; margin-inline: auto;
}
.bh-section-header p:not([class]) { max-width: var(--bh-narrow-width); font-size: var(--bh-fs-lead); }
.bh-section-header--left { align-items: flex-start; text-align: left; margin-inline: 0; }
.bh-section-header .bh-icon { width: 48px; height: 48px; object-fit: contain; }
@media (max-width: 767px) {
  .bh-eyebrow { font-size: var(--bh-m-fs-eyebrow); letter-spacing: var(--bh-m-ls-eyebrow); }
  .bh-section-header p:not([class]) { font-size: var(--bh-m-fs-lead); }
  .bh-section-header .bh-icon { width: 34px; height: 34px; }
}

/* ---------- Highlight box (headline emphasis signature) ----------
   Accent-colored box behind ONE key word, white text, slight tilt. */
.bh-highlight {
  display: inline-block; position: relative;
  color: var(--bh-white);
  background: var(--bh-accent);
  border-radius: var(--bh-r-12);
  padding: 0 0.18em;
  transform: rotate(-2deg);
}
/* Figma "Signed PMAs highlight" (8130:3) is #10AA86, same as the 79 other
   greens in the frame — the deeper AA-tuned green here was a build-side
   invention and read as a different green (review D2). */
.theme-bdm .bh-highlight { background: var(--bh-green); }
@media (max-width: 767px) { .bh-highlight { border-radius: 5px; } }

/* ---------- Buttons ---------- */
.bh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--bh-space-8);
  font-family: var(--bh-font-body);
  font-weight: var(--bh-w-bold);
  font-size: var(--bh-fs-body);
  padding: var(--bh-space-16) var(--bh-space-30);
  border-radius: var(--bh-r-btn);
  transition: transform var(--bh-dur-fast) var(--bh-ease),
              box-shadow var(--bh-dur-fast) var(--bh-ease),
              background-color var(--bh-dur-fast) var(--bh-ease),
              border-color var(--bh-dur-fast) var(--bh-ease),
              color var(--bh-dur-fast) var(--bh-ease),
              scale var(--bh-dur-fast) var(--bh-ease);
}
.bh-btn:hover { transform: translateY(-2px); }
.bh-btn:active { transform: translateY(0); scale: 0.96; }
.share-btn { transition: transform var(--bh-dur-fast) var(--bh-ease), scale var(--bh-dur-fast) var(--bh-ease); }
.share-btn:hover { transform: translateY(-2px); }
.share-btn:active { scale: 0.96; }
.bh-arrow { display: inline-block; transition: transform var(--bh-dur-fast) var(--bh-ease); }
.bh-btn:hover .bh-arrow { transform: translateX(3px); }
.bh-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.bh-btn--primary {
  background: var(--bh-accent); color: var(--bh-white);
  box-shadow: var(--bh-shadow-card);
}
.bh-btn--primary:hover { box-shadow: var(--bh-shadow-soft); }
.bh-btn--pink { background: var(--bh-pink); color: var(--bh-white); } /* nav CTA is always pink */
.bh-btn--secondary {
  background: var(--bh-white); color: var(--bh-ink);
  border: 1.5px solid var(--bh-ink);
  font-size: 15px;
}
.bh-btn--secondary:hover {
  background: var(--bh-bg-soft); color: var(--bh-accent); border-color: var(--bh-accent);
}
.bh-btn--on-color { background: var(--bh-white); color: var(--bh-accent); } /* on gradient banners */

/* ---------- Pills & chips ---------- */
.bh-tag {
  display: inline-flex; align-items: center;
  font-size: var(--bh-fs-fine); font-weight: var(--bh-w-bold);
  padding: var(--bh-space-4) var(--bh-space-12);
  border-radius: var(--bh-r-8);
}
.bh-tag--addon {
  border: 1px solid var(--bh-border-soft); color: var(--bh-body);
  text-transform: uppercase; border-radius: 6px;
}
.bh-pill-eyebrow { /* hero eyebrow pill */
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-12);
  padding: var(--bh-space-8) var(--bh-space-24);
}
.bh-chip { /* filter chip / category pill */
  display: inline-flex; align-items: center;
  font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold);
  padding: var(--bh-space-8) var(--bh-space-20);
  border-radius: var(--bh-r-pill);
  background: var(--bh-white); color: var(--bh-ink);
  border: 1px solid var(--bh-border-pill);
  transition: background-color var(--bh-dur-fast) var(--bh-ease);
}
.bh-chip.is-active { background: var(--bh-accent); color: var(--bh-white); border-color: var(--bh-accent); }
.bh-check-chip { /* hero ✓ chips */
  display: inline-flex; align-items: center; gap: var(--bh-space-8);
  font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); color: var(--bh-ink);
}
.bh-check-chip::before { content: '✓'; color: var(--bh-accent); font-weight: var(--bh-w-bold); }

/* ---------- Cards ---------- */
.bh-card { /* content card r16 */
  background: var(--bh-white);
  border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-lift);
  transition: transform var(--bh-dur-fast) var(--bh-ease), box-shadow var(--bh-dur-fast) var(--bh-ease);
}
a.bh-card:hover, .bh-card--hover:hover { transform: translateY(-4px); }
.bh-card--feature { /* plan/feature card r20, product color */
  border-radius: var(--bh-r-20); border: none;
  background: var(--bh-accent); color: var(--bh-white);
  overflow: hidden; position: relative;
}
.bh-card--chip { border-radius: var(--bh-r-12); border-color: var(--bh-border-chip); box-shadow: var(--bh-shadow-lift); }

/* ---------- Forms ----------
   Handoff form primitive: r12, 1.5px hairline, ~44px input height, border
   (not a ring) turns accent on focus. Shared — the contact page and every
   other form on the site inherit this, correctly (S3-forms design-advisor
   pass, 2026-09-01). */
.bh-field { display: flex; flex-direction: column; gap: var(--bh-space-8); }
.bh-field label { font-size: var(--bh-fs-fine); font-weight: var(--bh-w-bold); color: var(--bh-ink); }
.bh-input {
  background: var(--bh-white);
  border: 1.5px solid var(--bh-hairline);
  border-radius: var(--bh-r-12);
  padding: var(--bh-space-12) var(--bh-space-16);
  color: var(--bh-ink); width: 100%;
  transition: border-color var(--bh-dur-fast) var(--bh-ease), box-shadow var(--bh-dur-fast) var(--bh-ease);
}
.bh-input::placeholder { color: rgba(107,114,128,0.8); }
/* iOS zooms into any field under 16px; the form must never trigger that */
@media (max-width: 767px) { .bh-input, .bh-select, .bh-form select, .bh-form textarea { font-size: 1rem; } }
/* Chromium paints a native red/pink :invalid ring on an empty required field
   before any interaction — reset it; only :user-invalid (post-interaction)
   or .has-error carry the real signal. */
.bh-input:invalid { border-color: var(--bh-hairline); }
.bh-input:user-invalid { border-color: var(--bh-pink-deep); }
.bh-input:hover { border-color: var(--bh-body); }
/* Focus is a state, not an action: deep purple + lavender halo (DESIGN-SYSTEM R23). Only the
   error keeps the red family, so "you're here" and "you're wrong" never share a hue. */
.bh-input:focus {
  border-color: var(--bh-color-deep-purple); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bh-color-lavender) 55%, transparent);
}
.bh-field.has-error .bh-input, .bh-input:user-invalid { border-color: var(--bh-pink-deep); }
.bh-field.has-error .bh-input:focus, .bh-input:user-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bh-pink-deep) 18%, transparent);
}
.bh-field .bh-error { display: none; color: var(--bh-pink-deep); font-size: var(--bh-fs-fine); font-weight: var(--bh-w-semibold, 600); }
.bh-field.has-error .bh-error { display: flex; align-items: center; gap: var(--bh-space-8); }
.bh-field.has-error .bh-error::before {
  content: "!"; flex: 0 0 auto; width: 16px; height: 16px; border-radius: var(--bh-radius-pill, 999px);
  background: var(--bh-pink-deep); color: var(--bh-white); font-size: 11px; font-weight: var(--bh-w-xbold, 800);
  display: grid; place-items: center; line-height: 1;
}
.bh-form-success { display: none; }
.bh-form.is-success .bh-form-success { display: block; }

/* in-page anchor targets must clear the sticky header (review M3) */
:target, section[id] { scroll-margin-top: 104px; } /* nav is 84px with no announce bar */

/* ---------- Pagination (TEMPLATE SLOT) ----------
   The listing pages carry one page of content today, so this ships in its
   resting single-page state and is marked data-template-slot="pagination".
   It becomes live the moment a list needs a second page (review I2/J3/K3). */
.bh-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--bh-space-8);
  margin-top: 90px;
}
.bh-page-num, .bh-page-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--bh-space-12);
  border-radius: var(--bh-r-8);
  border: 1px solid var(--bh-border); background: var(--bh-white);
  font-family: var(--bh-font-body); font-weight: var(--bh-w-semibold);
  font-size: var(--bh-fs-body-sm); color: var(--bh-body);
  transition: background-color var(--bh-dur-fast) var(--bh-ease),
              color var(--bh-dur-fast) var(--bh-ease);
}
a.bh-page-num:hover, a.bh-page-arrow:hover { background: var(--bh-bg-soft); color: var(--bh-ink); }
.bh-page-num.is-current { background: var(--bh-accent); border-color: var(--bh-accent); color: var(--bh-white); }
.bh-page-arrow.is-disabled { opacity: 0.4; }
@media (max-width: 767px) { .bh-pagination { margin-top: 56px; } }

/* ---------- Accordion ---------- */
.bh-acc-item {
  background: var(--bh-white); border: 1px solid var(--bh-border); border-radius: var(--bh-r-16);
  transition: box-shadow var(--bh-dur-fast) var(--bh-ease);
}
.bh-acc-item + .bh-acc-item { margin-top: var(--bh-space-16); }
.bh-acc-item:not(.is-open):hover { box-shadow: var(--bh-shadow-card); }
.bh-acc-item:not(.is-open):hover .bh-acc-glyph { background: var(--bh-accent); color: var(--bh-white); }
.bh-acc-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-16);
  width: 100%; text-align: left;
  padding: var(--bh-space-24) var(--bh-space-30);
  font-family: var(--bh-font-body); font-weight: var(--bh-w-bold);
  font-size: 17px; color: var(--bh-ink);
}
.bh-acc-toggle .bh-acc-glyph {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; font-size: 0; line-height: 0;
  background: var(--bh-bg-soft); color: var(--bh-ink); font-weight: var(--bh-w-bold);
  transition: transform var(--bh-dur-med) var(--bh-ease),
              background-color var(--bh-dur-fast) var(--bh-ease),
              color var(--bh-dur-fast) var(--bh-ease);
}
.bh-acc-toggle .bh-acc-glyph * { font-size: 0; }
.bh-acc-toggle .bh-acc-glyph::before,
.bh-acc-toggle .bh-acc-glyph::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px;
  width: 46%; height: 2px; transform: translate(-50%, -50%);
  transition: transform var(--bh-dur-med) var(--bh-ease), opacity var(--bh-dur-fast) var(--bh-ease);
}
.bh-acc-toggle .bh-acc-glyph::after { transform: translate(-50%, -50%) rotate(90deg); }
.bh-acc-item.is-open .bh-acc-glyph::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
/* open state keeps the neutral border — the −/+ circle is the only coloured element (review A10) */
.bh-acc-item.is-open { border-color: var(--bh-border); }
.bh-acc-item.is-open .bh-acc-glyph { background: var(--bh-accent); color: var(--bh-white); transform: none; }
.bh-acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--bh-dur-med) var(--bh-ease);
}
.bh-acc-body > * { padding: 0 var(--bh-space-30) var(--bh-space-24); }
/* accordion - no self-clipping (2026-08-26, W08) */
.bh-acc-item { scroll-margin-top: 104px; }   /* clears the 84px sticky nav on reveal */
@media (prefers-reduced-motion: reduce) { .bh-acc-body { transition: none; } }

/* ---------- M3: feedback on hover (LANE M) ---------- */
.blog-cover { transition: transform 300ms var(--bh-ease); }
.blog-card:hover .blog-cover { transform: scale(1.03); }
.blog-title { transition: color var(--bh-dur-fast) var(--bh-ease); }
.blog-card:hover .blog-title { color: var(--bh-accent); }
main a[class*="-card"] { transition: transform var(--bh-dur-enter) var(--bh-ease), box-shadow var(--bh-dur-enter) var(--bh-ease); }
main a[class*="-card"]:hover { transform: translateY(-4px); }
.plan-card { transition: transform var(--bh-dur-enter) var(--bh-ease); }
.plan-card:hover { transform: translateY(-4px); }
.plan-title { position: relative; }
.plan-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px;
  background: var(--bh-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--bh-dur-enter) var(--bh-ease);
}
.plan-card:hover .plan-title::after { transform: scaleX(1); }
.plan-card--crm .plan-title::after { background: var(--bh-violet); }
.plan-card--bdm .plan-title::after { background: var(--bh-green); }
.plan-card--pm .plan-title::after { background: var(--bh-pink); }
.plan-card--broker .plan-title::after { background: var(--bh-blue); }

/* ---------- Reduced motion: keep color/shadow feedback, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .bh-btn:hover, .bh-btn:active,
  a.bh-card:hover, .bh-card--hover:hover {
    transform: none; scale: none;
  }
  .bh-btn:hover .bh-arrow, .plan-card:hover, .blog-card:hover .blog-cover, .share-btn:hover, .share-btn:active, main a[class*="-card"]:hover { transform: none; scale: none; }
}

/* ---------- Tabs ---------- */
.bh-tab {
  padding: var(--bh-space-12) var(--bh-space-24);
  border-radius: var(--bh-r-12);
  background: var(--bh-white); color: var(--bh-ink);
  border: 1px solid var(--bh-border); box-shadow: var(--bh-shadow-card);
  font-weight: var(--bh-w-semibold);
}
.bh-tab.is-active { background: var(--bh-accent); color: var(--bh-white); border-color: var(--bh-accent); }
.bh-tab-panel { display: none; }
.bh-tab-panel.is-active { display: block; }

/* ---------- Carousel ---------- */
.bh-carousel { overflow: hidden; }
.bh-car-track {
  display: flex;
  transition: transform var(--bh-dur-med) var(--bh-ease);
}
.bh-car-slide { flex: 0 0 100%; }
.bh-car-controls { display: flex; align-items: center; justify-content: center; gap: var(--bh-space-16); margin-top: var(--bh-space-24); }
.bh-car-dots { display: flex; align-items: center; gap: var(--bh-space-8); }
.bh-car-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bh-border); transition: background-color var(--bh-dur-fast); }
.bh-car-dot.is-active { width: 12px; height: 12px; background: var(--bh-accent); }
/* active carousel dot becomes a pill that fills over the autoplay interval (DESIGN-SYSTEM R21) */
.bh-car-dot { position: relative; overflow: hidden; transition: width var(--bh-dur-enter) var(--bh-ease), background-color var(--bh-dur-fast); }
.bh-car-dot.is-active { width: 28px; height: 10px; border-radius: var(--bh-radius-pill, 999px); background: color-mix(in srgb, var(--bh-accent) 28%, transparent); }
.bh-car-dot.is-active::after { content: ""; position: absolute; inset: 0; background: var(--bh-accent); border-radius: inherit; transform-origin: left center; }
.bh-car-prev, .bh-car-next { font-size: 22px; color: var(--bh-ink); }

/* ---------- Scroll reveal ---------- */
/* Reveal styles only apply when JS is running (html.js set inline in <head>) —
   with JS off the page renders fully visible (Part E.9). */
@media (prefers-reduced-motion: no-preference) {
  /* Only elements below the fold when the page arrives are hidden (shared.js marks them
     is-pending after first paint); everything already on screen renders as-is. D56. */
  html.js .bh-reveal.is-pending { opacity: 0; transform: translateY(var(--bh-reveal-rise)); }
  html.js .bh-reveal.is-visible {
    opacity: 1; transform: none;
    transition: opacity var(--bh-dur-reveal) var(--bh-ease), transform var(--bh-dur-reveal) var(--bh-ease);
  }
  html.js .bh-reveal[data-reveal-delay="1"].is-visible { transition-delay: calc(1 * var(--bh-reveal-stagger)); }
  html.js .bh-reveal[data-reveal-delay="2"].is-visible { transition-delay: calc(2 * var(--bh-reveal-stagger)); }
  html.js .bh-reveal[data-reveal-delay="3"].is-visible { transition-delay: calc(3 * var(--bh-reveal-stagger)); }
  html.js .bh-reveal[data-reveal-delay="4"].is-visible { transition-delay: calc(4 * var(--bh-reveal-stagger)); }

  /* ---------- M2: motion that means something (LANE M) ----------
     Logo grids land in four waves once their revealed container is visible;
     the steps connector draws itself and 1 -> 2 -> 3 pop in order. */
  html.js .bh-reveal.is-pending :is(.trust-logos, .trust-grid, .trusted-grid, .int-grid, .inv-grid, .readby-logos) > *,
  html.js .bh-reveal.is-pending:is(.trust-logos, .trust-grid, .trusted-grid, .int-grid, .inv-grid, .readby-logos) > * { opacity: 0; transform: translateY(10px); }
  html.js .bh-reveal.is-visible :is(.trust-logos, .trust-grid, .trusted-grid, .int-grid, .inv-grid, .readby-logos) > *,
  html.js .bh-reveal.is-visible:is(.trust-logos, .trust-grid, .trusted-grid, .int-grid, .inv-grid, .readby-logos) > * {
    opacity: 1; transform: none;
    transition: opacity var(--bh-dur-reveal) var(--bh-ease), transform var(--bh-dur-reveal) var(--bh-ease);
    transition-delay: calc(var(--bh-reveal-stagger) * 3);
  }
  html.js .bh-reveal.is-visible :is(.trust-logos, .trust-grid, .trusted-grid, .int-grid, .inv-grid, .readby-logos) > :nth-child(4n+2),
  html.js .bh-reveal.is-visible:is(.trust-logos, .trust-grid, .trusted-grid, .int-grid, .inv-grid, .readby-logos) > :nth-child(4n+2) { transition-delay: calc(var(--bh-reveal-stagger) * 4); }
  html.js .bh-reveal.is-visible :is(.trust-logos, .trust-grid, .trusted-grid, .int-grid, .inv-grid, .readby-logos) > :nth-child(4n+3),
  html.js .bh-reveal.is-visible:is(.trust-logos, .trust-grid, .trusted-grid, .int-grid, .inv-grid, .readby-logos) > :nth-child(4n+3) { transition-delay: calc(var(--bh-reveal-stagger) * 5); }
  html.js .bh-reveal.is-visible :is(.trust-logos, .trust-grid, .trusted-grid, .int-grid, .inv-grid, .readby-logos) > :nth-child(4n+4),
  html.js .bh-reveal.is-visible:is(.trust-logos, .trust-grid, .trusted-grid, .int-grid, .inv-grid, .readby-logos) > :nth-child(4n+4) { transition-delay: calc(var(--bh-reveal-stagger) * 6); }

  /* the accent line draws over the gray track and stays; numbers pop with a small overshoot and a ring */
  .steps-timeline::after {
    content: ""; position: absolute; top: 31px; left: 16%; right: 16%; height: 3px;
    background: var(--bh-accent); transform: scaleX(0); transform-origin: left center;
  }
  .steps-timeline:has(.step.is-visible)::after { transform: scaleX(1); transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1); }
  html.js .step.bh-reveal[data-reveal-delay="1"].is-visible { transition-delay: 360ms; }
  html.js .step.bh-reveal[data-reveal-delay="2"].is-visible { transition-delay: 720ms; }
  html.js .step.is-pending .step-circle { transform: scale(0.4); }
  html.js .step.is-visible .step-circle { transform: none; transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: inherit; }
  html.js .step .step-circle::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--bh-accent); opacity: 0; }
  html.js .step.is-visible .step-circle::after { animation: bh-ring 700ms var(--bh-ease) forwards; animation-delay: inherit; }
  @keyframes bh-ring { 0% { opacity: 0.9; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.35); } }
  @media (max-width: 767px) { .steps-timeline::after { display: none; } }
  html.js .step.is-pending::after { transform: scaleY(0); transform-origin: top center; }
  html.js .step.is-visible::after { transform: scaleY(1); transition: transform 400ms var(--bh-ease) 250ms; }

  /* ---------- M3: the one ambient touch + the carousel dot that fills while it autoplays ---------- */
  @keyframes bh-drift { to { transform: scale(1.04); } }
  html.js .trust-card.is-visible .trust-earth { animation: bh-drift 20s ease-in-out infinite alternate; transform-origin: 50% 80%; }
  html.js .trust-card.is-offscreen .trust-earth { animation-play-state: paused; }
  @keyframes bh-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  html.js .bh-carousel.is-playing .bh-car-dot.is-active::after { animation: bh-dot-fill var(--bh-car-delay, 6000ms) linear forwards; }
  html.js .bh-carousel.is-paused .bh-car-dot.is-active::after { animation-play-state: paused; }

  /* ---------- M4: hero entrance - eyebrow, then the headline word by word, the highlight
     wipes in, then sub and CTA. shared.js splits the words and sets --bh-hero-after. ---------- */
  html.js .bh-hero h1.bh-reveal.bh-words { opacity: 1; transform: none; transition: none; }
  html.js .bh-hero h1.bh-words .bh-word { display: inline-block; }
  html.js .bh-hero h1.bh-words.is-pending .bh-word { opacity: 0; }
  html.js .bh-hero h1.bh-words.is-pending .bh-word:not(.bh-highlight) { transform: translateY(10px); }
  html.js .bh-hero h1.bh-words.is-pending .bh-highlight { clip-path: inset(0 100% 0 0); }
  html.js .bh-hero h1.bh-words.is-visible .bh-word {
    opacity: 1; transform: none;
    transition: opacity 260ms var(--bh-ease), transform 260ms var(--bh-ease);
  }
  html.js .bh-hero h1.bh-words.is-visible .bh-highlight {
    transform: rotate(-2deg); clip-path: inset(0 0 0 0);
    transition: opacity 200ms var(--bh-ease), clip-path 260ms var(--bh-ease);
  }
  html.js .bh-hero .hero-sub.bh-reveal.is-visible,
  html.js .bh-hero .hero-chips.bh-reveal.is-visible,
  html.js .bh-hero .hero-proof.bh-reveal.is-visible {
    transition-duration: 300ms; transition-delay: var(--bh-hero-after, calc(2 * var(--bh-reveal-stagger)));
  }
  html.js .bh-hero .hero-cta.bh-reveal.is-visible,
  html.js .bh-hero .adv-hero-cta.bh-reveal.is-visible {
    transition-duration: 300ms; transition-delay: calc(var(--bh-hero-after, calc(3 * var(--bh-reveal-stagger))) + 60ms);
  }
  html.js .bh-reveal[data-reveal-delay="5"].is-visible { transition-delay: calc(5 * var(--bh-reveal-stagger)); }
}

/* ============================================================
   NAV + FOOTER — structural skeleton; exact measurements refined
   against pages/home/SPEC.md during the Home pilot.
   ============================================================ */

/* ---------- Nav ---------- */
.bh-nav-wrap { position: sticky; top: 0; z-index: var(--bh-z-nav); }
.bh-nav {
  background: var(--bh-white);
  box-shadow: var(--bh-shadow-nav);
  transition: box-shadow var(--bh-dur-enter) var(--bh-ease);
}
html.js .bh-nav { box-shadow: none; }
html.js .bh-nav-wrap.is-scrolled .bh-nav { box-shadow: var(--bh-shadow-nav); }
.bh-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 84px;
  width: min(var(--bh-content-width), 100% - 2 * var(--bh-m-page-margin));
  margin-inline: auto;
}
.bh-nav-logo img, .bh-nav-logo svg { height: 24.83px; width: auto; }
.bh-nav-links { display: flex; align-items: center; gap: var(--bh-space-32); }
.bh-nav-link {
  display: inline-flex; align-items: center; gap: var(--bh-space-4);
  font-size: 15px; font-weight: var(--bh-w-medium); color: var(--bh-ink);
  padding: var(--bh-space-8) 0;
  transition: color var(--bh-dur-fast) var(--bh-ease);
}
.bh-nav-link:hover { color: var(--bh-accent); }
.bh-nav-link .bh-caret { font-size: 9px; color: var(--bh-caret-grey); transition: transform var(--bh-dur-fast) var(--bh-ease); }
.bh-nav-item.is-open .bh-caret { transform: rotate(180deg); }
/* hover bridge: the panel hangs off the nav bar, so the pointer crosses ~30px of nothing
   between the link and the panel. This strip keeps the item hovered on the way down
   (Sagi 2026-09-03: "hover About, move toward the menu, it disappears"). */
.bh-nav-item.is-open::after {
  content: ""; position: absolute;
  top: var(--dd-bridge-top, 100%); height: var(--dd-bridge-height, 0);
  left: var(--dd-bridge-left, 0); width: var(--dd-bridge-width, 0);
}
.bh-nav-cta { padding: 13px 22px; font-size: var(--bh-fs-body-sm); box-shadow: var(--bh-shadow-btn-sm); }

/* Dropdown panels — full-width mega panels centered under the nav bar
   (Figma: white 1240×470, r20/r24, page-centered). The .bh-nav-item is NOT
   position:relative; panels anchor to .bh-nav-wrap. */
.bh-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(1240px, 100vw - 2 * var(--bh-space-20));
  z-index: var(--bh-z-dropdown);
  background: var(--bh-bg);   /* same token as the page background */
  border-radius: var(--bh-r-20);
  box-shadow: 0px 12px 34px rgba(20,15,38,0.10);  /* all three dropdowns share this */
  padding: var(--bh-space-40);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--bh-dur-exit) ease-in, transform var(--bh-dur-exit) ease-in, visibility 0s linear var(--bh-dur-exit);
  overflow: hidden;   /* keeps the grain layer inside the rounded corners */
}
/* grainy panel — same recipe as the page background (Figma grain @0.45 multiply) */
.bh-dropdown::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.45; mix-blend-mode: multiply; pointer-events: none;
}
.bh-dropdown > * { position: relative; z-index: 1; }
.bh-nav-item.is-open .bh-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity var(--bh-dur-enter) var(--bh-ease), transform var(--bh-dur-enter) var(--bh-ease), visibility 0s;
}
.bh-dd-eyebrow { font-size: 12px; letter-spacing: 1px; }
.bh-dd-item {
  display: flex; align-items: center; gap: var(--bh-space-12);
  padding: var(--bh-space-8); border-radius: var(--bh-r-12);
  transition: background-color var(--bh-dur-fast) var(--bh-ease);
}
.bh-dd-item:hover { background: color-mix(in srgb, var(--bh-color-deep-purple) 6%, transparent); }
.bh-dd-tile { /* white icon tile */
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--bh-r-6); /* review A3 */
  background: var(--bh-white); box-shadow: var(--bh-shadow-tile);
  display: flex; align-items: center; justify-content: center;
}
.bh-dd-tile img { width: 65%; height: 65%; object-fit: contain; } /* matches Figma (review A2) */
.bh-dd-name { font-size: 15px; font-weight: var(--bh-w-bold); color: var(--bh-ink); }
.bh-dd-desc { font-size: var(--bh-fs-fine); color: var(--bh-body); }

/* Mobile nav */
.bh-burger { display: none; }
@media (max-width: 1023px) {
  .bh-nav-links { display: none; }
  .bh-nav-cta { padding: 6px var(--bh-space-16); font-size: var(--bh-fs-body-sm); margin-left: auto; }
  .bh-nav-inner { gap: var(--bh-space-12); }
  .bh-burger {
    display: inline-flex; flex-direction: column; gap: 4px; padding: var(--bh-space-12);
  }
  .bh-burger span { display: block; width: 22px; height: 2px; background: var(--bh-ink); border-radius: 2px; }
  .bh-nav-inner { height: 64px; }
  .bh-mobile-menu {
    position: fixed; inset: 0; z-index: var(--bh-z-mobile-menu);
    background: var(--bh-white); overflow-y: auto;
    transform: translateX(100%); transition: transform var(--bh-dur-med) var(--bh-ease);
  }
  body.bh-menu-open .bh-mobile-menu { transform: translateX(0); }
  body.bh-menu-open { overflow: hidden; }
  /* Every icon tile inside the mobile menu uses the MOBILE tile shadow — the desktop
     recipe (16px blur) is an oversized smudge under a 44-46px tile. Covers drill rows AND
     the featured drill card title, which the old page-local rule missed. */
  .bh-mobile-menu .bh-dd-tile {
    width: 46px; height: 46px;
    box-shadow: var(--bh-shadow-tile-mobile);
  }
  .bh-drill-card-title .bh-dd-tile { width: 44px; height: 44px; }

  .bh-drill {
    position: absolute; inset: 0; background: var(--bh-white); overflow-y: auto;
    transform: translateX(100%); transition: transform var(--bh-dur-med) var(--bh-ease);
  }
  .bh-drill.is-open { transform: translateX(0); }
}
@media (min-width: 1024px) { .bh-mobile-menu { display: none; } }

/* ---------- Footer ---------- */
.bh-footer {
  background: var(--bh-dark);
  color: var(--bh-footer-text);
  padding-block: var(--bh-space-56) var(--bh-space-40);
}
.bh-footer a { transition: color var(--bh-dur-fast) var(--bh-ease); }
.bh-footer a:hover { color: var(--bh-white); }
/* Two-tier footer: brand spans both rows; row 1 = the four plans with their tools
   nested, row 2 = Company / Resources / Pillow Talk Newsletter. No divider between rows. */
.bh-footer-grid {
  display: grid; grid-template-columns: 261px repeat(4, 1fr);
  column-gap: var(--bh-space-40); row-gap: 44px;
}
.bh-footer-brand { grid-row: 1 / span 2; }
.bh-footer-col--wide { grid-column: span 2; }
.bh-footer-note { color: rgba(244,242,248,0.55); font-size: var(--bh-fs-body-sm); }
.bh-footer-col h2 {
  font-family: var(--bh-font-body);
  font-size: 12px; font-weight: var(--bh-w-xbold);
  letter-spacing: 1px; text-transform: uppercase;
  color: rgba(244,242,248,0.75);
  /* Figma footer: heading 16px tall, 12px gap to first link (col total 166) */
  line-height: 16px; margin-bottom: var(--bh-space-12);
}
/* Named sections (the four plans, Company, Resources) use the product/section name as the
   heading: body font, 16px, no uppercase. Only Pillow Talk Newsletter keeps the small eyebrow. */
.bh-footer-col--titled h2 {
  font-family: var(--bh-font-body); font-size: 16px; font-weight: var(--bh-w-bold);
  color: #F4F2F8; text-transform: none; letter-spacing: 0;
}
/* the plan heading is itself a link to that plan's page */
.bh-footer-col--titled h2 a { color: inherit; text-decoration: none; }
.bh-footer-col--titled h2 a:hover { color: var(--bh-white); }
/* Figma footer link rhythm: 18px line + 12px gap = 30px step; last item flush */
.bh-footer-col li { margin-bottom: var(--bh-space-12); font-size: var(--bh-fs-body-sm); line-height: 18px; }
.bh-footer-col li:last-child { margin-bottom: 0; }
.bh-footer-logo img, .bh-footer-logo svg { height: 24.83px; width: auto; }
.bh-footer-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--bh-space-16);
  /* Figma: grid bottom → 40 → divider → 40 → 17px text row (footer total 360) */
  margin-top: var(--bh-space-40); padding-top: var(--bh-space-40);
  border-top: 1px solid var(--bh-divider-on-dark);
  font-size: var(--bh-fs-fine); line-height: 17px;
}
.bh-footer-note { flex-basis: 100%; margin: 0; color: var(--bh-text-body-grey-dark); }
@media (max-width: 767px) {
  /* mobile: brand full width, the four plans 2x2, Company/Resources side by side,
     signup full width. The desktop row-span must be cleared or the grid mis-flows. */
  .bh-footer-grid { grid-template-columns: 1fr 1fr; column-gap: var(--bh-space-16); row-gap: var(--bh-space-30); }
  .bh-footer-brand { grid-row: auto; }
  .bh-footer-grid > .bh-footer-brand,
  .bh-footer-grid > .bh-footer-col--wide { grid-column: 1 / -1; }
}

/* === nav drill-in banners - clay artwork (2026-08-26, T68/T69/A17) ===
   Both banners were text-only boxes; Figma gives each a clay scene. The artwork comes
   from the original text-free renders, NOT from the Figma banner images - those are a
   single flat image with the copy baked into the pixels, so using them as a background
   would double every word. Live copy is kept and the art sits behind/above it.
   NOTE two things this needs to survive: the url() is relative to design-system/, not to
   the page, and page.css loads AFTER base.css - its background and padding shorthands
   on .bh-drill-card would wipe these, hence the "body " prefix. */
/* The desktop dropdown card renders at whatever height its flex row gives it - measured
   340x302 against Figma's 340x390. The copy block is bottom-anchored, so a short card
   pushes it up: eyebrow landed at 45.1% instead of Figma's 64.1%. .bh-dd-featured--crm
   already carries min-height:390px; the news card never got it. */
@media (min-width: 1024px) {
  .bh-dd-featured--news { min-height: 390px; }
  /* Figma's text nodes are cap-height boxes (12 / 20 / 13); the browser adds leading and
     makes them 19 / 31 / 20. That is 25px more stack, and because the block is
     bottom-anchored the whole thing rides 25px (6.4% of the card) too high. Matching the
     box heights puts the eyebrow back on Figma's 64.1%. */
  .bh-dd-featured--news .bh-dd-eyebrow,
  .bh-dd-featured--news .bh-dd-featured-title,
  .bh-dd-featured--news .bh-dd-featured-link { line-height: 1; }
}
@media (max-width: 1023px) {
  /* About - handshake across the top, copy beneath */
  body .bh-drill-card--news {
    background-image: url('/assets/home/nav-banner-pmi.webp');
    background-repeat: no-repeat;
    background-color: var(--bh-dark);   /* identical to the image's base - no seam */
    background-position: top center;
    background-size: 100% auto;
    padding-top: 214px;
    min-height: 340px;
  }
  /* Resources - Pillow Talk. Figma 11112:7119 draws the clay banner as the FULL card
     background with the copy over it (card 350x204), not as a corner sticker. Matched here.
     Geometry read off that node: 22px inset, 9px between blocks, copy measured to 207px so the
     lines clear the astronaut, button 112x35. */
  body .bh-drill-card--pillow {
    position: relative;
    overflow: hidden;
    min-height: 204px;
    padding: 22px;
    /* Figma puts a SECOND fill over the artwork: a horizontal gradient #170F1C at 94% on the
       left, 55% at the midpoint, 0% at the right. That scrim is what keeps the copy legible
       over the machines - without it the card measured 17.5 L brighter overall and 37.7 at the
       left edge, which is where the headline sits. */
    background-image:
      linear-gradient(to right, rgba(23,15,28,0.94) 0%, rgba(23,15,28,0.55) 50%, rgba(23,15,28,0) 100%),
      url('/assets/home/nav-banner-newsletter.webp');
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;
    background-color: var(--bh-dark);
  }
  /* Figma sets 11px. The global small-text floor (body .bh-drill-card-eyebrow sits in the
     max(12px, 1em) selector list) resolved 1em to 14.5px here, so the eyebrow rendered a third
     larger than designed. Lior chose the Figma value over the floor. */
  body .bh-drill-card--pillow .bh-drill-card-eyebrow {
    font-size: 11px;
    line-height: 1.273;   /* Figma text node is 14px tall at 11px; the inherited 1.55 made it 17 and pushed every block below it down 3px */
    margin-bottom: 9px;
  }
  /* 306px content box minus 99 = 207, the width of the Figma text boxes. */
  body .bh-drill-card--pillow .bh-drill-card-title {
    padding-right: 99px;
    line-height: 1.18;
    margin-bottom: 9px;
  }
  body .bh-drill-card--pillow .bh-drill-card-desc {
    padding-right: 99px;
    line-height: 1.35;
    margin-bottom: 9px;
  }
  body .bh-drill-card--pillow .bh-drill-card-btn {
    position: relative;
    z-index: 1;
    padding: 8px 18px;   /* Figma button is 112x35; 16px padding measured 108.4 wide */
    line-height: 1.4;
  }
}

/* === page one-offs batch B (2026-08-26, W20) === */

/* T70 - the mobile menu could be swiped sideways to reveal the off-screen drill-in
   panel. .bh-mobile-menu sets overflow-y:auto and nothing for x; per spec, when one
   axis is not `visible` the other computes to auto, so the panels parked at
   translateX(100%) became horizontally scrollable. Measured: overflow-x computed
   auto, scrollWidth 780 against clientWidth 390 - exactly 2x the viewport, i.e. the
   off-screen panel. Pinning overflow-x:hidden leaves vertical scrolling untouched. */
@media (max-width: 1023px) {
  .bh-mobile-menu { overflow-x: hidden; }
}

/* T67 - the Super CRM card in the mobile Platform drill-in had no Explore button at
   all (0 CTA elements), not a mis-styled one. It is a <span> rather than a nested
   <a> so the card stays a single link and the stretched-link rule still holds. */
@media (max-width: 1023px) {
  .bh-drill-card-cta {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: var(--bh-space-16);
    height: 38px; padding-inline: var(--bh-space-20);
    border-radius: var(--bh-r-12);
    background: var(--bh-white); color: var(--bh-ink);
    font-size: 14px; font-weight: var(--bh-w-bold);
    box-shadow: var(--bh-shadow-btn-sm);
  }
}

/* === hero pill row - one shared component (2026-08-26, W19/T07) ===
   .hero-chips exists on 8 pages, each previously with its own copy of the rules. This is
   the single definition. base.css loads BEFORE page.css, so the "body " prefix is what
   keeps these from being overridden by whatever a page still declares locally. */
@media (max-width: 767px) {
  body .hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;      /* a leftover pill centres instead of ranging left */
    align-items: center;
    padding-inline: var(--bh-space-12);   /* clear of the page edge without costing a pair */
    row-gap: var(--bh-space-8);
  }
  body .hero-chip {
    flex: 0 0 auto;               /* hug the text - never a forced half-width */
    white-space: nowrap;          /* one line, always */
    min-width: 0;
  }
  body .hero-chip-check, body .hero-chip-dot { flex: 0 0 auto; }
}
@media (max-width: 389px) {
  /* below 390 the type comes in slightly so two pills still pair up */
  body .hero-chip { font-size: 12px; padding-inline: var(--bh-space-12); gap: 8px; }
  body .hero-chips { column-gap: 6px; }
}

/* === hero social proof - ONE component (2026-08-26, W03) ===
   Avatar cluster + "Loved by leading property managers", used in the hero CTA row of
   eight pages. THIS IS THE ONLY DEFINITION - the pages carry no rules for it at all.
   Reference geometry is Super Broker's, measured: desktop 357x42, mobile 272x40.
   The "body " prefix matters: base.css loads BEFORE page.css, so anything a page adds
   later would otherwise win on nothing more than source order. */
body .hero-proof {
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-8);
  min-width: 0;
}
body .hero-avatars {
  display: inline-flex;
  flex: 0 0 auto;   /* it was shrinking to 73px while its 36px images kept their size and
                       ran to x=108, which put the label on top of the third avatar */
}
body .hero-avatars img {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--bh-white);
  object-fit: cover;
}
body .hero-avatars img + img { margin-left: -12px; }
body .hero-proof-label {
  font-size: 15px;
  font-weight: var(--bh-w-semibold);
  color: var(--bh-body);
  min-width: 0;
  /* NEVER nowrap here. super-bdm had it on desktop and property-analyzer on mobile, on a
     253px label - the block cannot shrink, so it pushed the hero row wide instead. */
  white-space: normal;
}
@media (max-width: 767px) {
  body .hero-avatars img { width: 36px; height: 36px; border-width: 3px; }
  body .hero-proof-label {
    font-size: 16px;
    font-weight: var(--bh-w-medium);
    max-width: 180px;
    text-align: left;    /* T12 - it was inheriting the hero's centre alignment */
    line-height: 1.25;
  }
}

/* === footer slack + type floor + dot targets (2026-08-26, W12/W15/W16) === */

/* --- W12 / D08 : the footer grid had zero slack (5px protrusion at 768 before any
   override, 47px under the WCAG 1.4.12 text-spacing overrides) --- */
/* SCOPED TO DESKTOP. Unscoped, this rule sat AFTER the @media (max-width:767px)
   block earlier in base.css and therefore beat it on source order alone - the
   mobile footer kept all five desktop columns and squeezed four of them to one
   character per line at 360. Measured: 'Super BDM', 'Super PM', 'Super Broker' and
   'Company' rendered as vertical strips of single letters. */
@media (min-width: 1024px) {
  .bh-footer-grid {
    grid-template-columns: minmax(0, 261px) repeat(4, minmax(0, 1fr));
  }
}
.bh-footer-col { min-width: 0; }
.bh-footer-col h2, .bh-footer-col li, .bh-footer-col a { overflow-wrap: break-word; }
@media (min-width: 768px) and (max-width: 1023px) {
  /* the tablet band was inheriting the 5-column desktop footer */
  .bh-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--bh-space-24);
  }
  .bh-footer-brand { grid-row: auto; grid-column: 1 / -1; }
  .bh-footer-col--wide { grid-column: span 1; }
}

/* --- W15 / D10 : floor the fluid type scale at 12px. Decorative glyph spans
   (.hero-chip-dot, .bh-caret, .hero-chip-check) are left at 9px on purpose. --- */
body .tour-record-label,
body .featured-pill,
body .blog-pill,
body .tour-score-label,
body .bh-drill-card-eyebrow,
body .tour-pill,
body .blog-meta,
body .guide-brand,
body .guide-tag,
body .hero-eyebrow-text,
body .sp-training-label,
body .sp-training-eyebrow,
body .tool-pill,
body .runit-label,
body .ed-eyebrow,
body .author-writes,
body .share-label,
body .pull-stat-source,
body .side-eyebrow,
body .tour-url,
body .tour-contact-sub,
body .featured-meta,
body .plan-eyebrow,
body .tour-lead-meta,
body .bh-tag--addon-m,
body .adv-pill,
body .bh-eyebrow {
  font-size: max(12px, 1em);
}

/* --- W15 / D11 : body copy had no measure limit (104-121 characters per line) --- */
@media (min-width: 1023px) {
  body .legal-section p,
  body .legal-content > p,
  body .post-body p,
  body .author-bio,
  body .ed-body p,
  body .prose p {
    max-width: min(62ch, 100%);   /* 70ch measured ~87 real characters: ch is the width of a zero. */
                                 /* min(..,100%) keeps any container cap - .author-bio on Newsletter */
  }
}

/* --- W16 / D12 : carousel dots were 10-12px targets 18-19px apart. Visual size
   unchanged; the hit area is extended to the WCAG 2.5.8 minimum. --- */
.bh-car-dot { position: relative; }
.bh-car-dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
}

/* === mobile footer height parity with Figma (2026-08-26, A05/A06) ===
   The footer had no mobile padding override at all, so it served the desktop 56/40 at
   390 too. Figma's mobile instance is 390x921, padding 40/24/30/24. */
@media (max-width: 767px) {
  body .bh-footer { padding-top: 40px; padding-bottom: 30px; }
  body .bh-footer-bottom {
    margin-top: var(--bh-space-24);
    padding-top: var(--bh-space-24);
    row-gap: 0;   /* the bar is a flex row with gap:16 that WRAPS on mobile, so the wrap was
                     adding 16px on top of the explicit gap below - 40px against Figma's 24 */
  }
  body .bh-footer-legal { margin-top: var(--bh-space-24); }   /* Figma's copyright -> legal gap */
  body .bh-footer-note { margin-top: var(--bh-space-16); }
}

/* === FAQ accordion - closed row matches Figma's 54px (2026-08-26, A05/A06) ===
   Figma: closed row 342x54, pad 17/20, question fs16/lh20, "+" a 12x20 text node.
   The build had the padding and the type right and the glyph 30x30, which is the whole
   12px. The "body " prefix is what beats the per-page .faq-list rule that follows in
   page.css purely on source order. */
@media (max-width: 767px) {
  body .faq-list .bh-acc-item:not(.is-open) .bh-acc-glyph {
    width: 20px; height: 20px; line-height: 20px;
  }
  body .faq-list .bh-acc-item:not(.is-open) .bh-acc-toggle { line-height: 20px; }
}

/* === footer: Free with any plan under Super CRM (2026-08-26) ===
   Lior asked for this back under the Super CRM heading, on both surfaces. It sits in a
   one-item <ul> so it inherits the column's existing type and 12px rhythm; the only rule
   it needs is the one that stops it looking like the links around it. */
.bh-footer-note-item { color: var(--bh-footer-text); opacity: 0.72; cursor: default; }

/* === CTA button never breaks across lines (2026-08-26) ===
   Super Broker's banner button wrapped to "Book a / Demo" at 360 and 390 because that
   page keeps a 54% copy column on mobile. A two-word CTA label should not break on any
   page, so this is site-wide rather than a Super Broker patch. */
.cta-btn, .cta-banner .bh-btn { white-space: nowrap; }
@media (max-width: 389px) {
  /* At 360 the un-wrapped button is 138px against a 168px copy column, so its right edge
     (162) crossed the figure's left edge (150) by 12px. Tightening the side padding from
     24 to 16 brings it to 122px and clears the figure by 4px. Only below 375 - at 390 the
     column is 185 and there is nothing to fix. The band runs to 389 rather than 374
     because at 375 the figure has grown but the column has not caught up yet - measured
     right edge 162 against a figure starting at 158. */
  .cta-banner .cta-btn { padding-inline: var(--bh-space-16); }
}

/* === security cards match Figma's 342x385 (2026-08-26, A05) ===
   LIOR CHOSE OPTION C (2026-08-26), after seeing the build's own card, the Figma-exact
   card and a middle option side by side (tools/out/ba/Q-A05-security-options.png):
   Figma's 68x68 icon with the build's tighter type. Card lands ~342x306 against Figma's
   342x385 and the build's original 342x271.
   THIS NOW DIVERGES FROM FIGMA ON PURPOSE - the four product mobile frames still carry
   the 385px instance and need updating to match. */
@media (max-width: 767px) {
  body .security-card, body .sec-card { padding: 34px 30px 44px; }
  body .security-icon, body .sec-icon { width: 68px; height: 68px; object-fit: contain; }
  body .security-title, body .sec-title {
    font-size: 22px; line-height: 26px; min-height: 0; margin-top: 24px;
  }
  body .security-desc, body .sec-desc { font-size: 16px; line-height: 24px; margin-top: 12px; }
}

/* === superpower illustration - one component, one aspect (2026-08-26, W04) ===
   .sp-art (super-bdm), .sp-image (super-pm) and .sp-imgcard (super-broker) are the same
   thing under three names, and each was giving the picture a different box: 300x300,
   298x224 and 300x201, the last with object-fit:FILL. Figma has one component - image-card,
   302x279, radius 14 - and the assets are now exported from those frames, so the box only
   has to hold the aspect and there is nothing left to crop.
   The "body " prefix beats the three per-page rules that follow in page.css. */
/* The ASPECT GOES ON THE IMAGE, not on the container. Two of these containers carry
   padding (32px on desktop, 20px on Super BDM's mobile art card), so putting the ratio on
   the border-box left the picture inside at a different ratio and cover started cropping
   again - 6% on Super BDM at 390. On the image it is exact everywhere. */
body .sp-art, body .sp-image, body .sp-imgcard {
  height: auto;
  border-radius: 14px;
}
body .sp-art img, body .sp-image img, body .sp-imgcard img {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 302 / 279;
  height: auto;
  object-fit: cover;        /* a no-op now that the asset IS the design's crop */
  object-position: center;
  border-radius: inherit;
}
/* EQUAL HEIGHTS need an equal WIDTH, and the columns are not equal: they are sized by the
   text beside them, so at 1440 they measured 608 / 634 / 634 on Super BDM and 600 / 580 /
   600 on Super PM. Pinning the picture's width inside the column is what makes all eight
   identical - the column can still breathe, the picture no longer follows it. */
@media (min-width: 1280px) { body .sp-art img, body .sp-image img, body .sp-imgcard img { width: 520px; } }
@media (min-width: 1024px) and (max-width: 1279px) { body .sp-art img, body .sp-image img, body .sp-imgcard img { width: 400px; } }

/* === CTA banner - tablet + desktop framing (2026-08-26) === */

/* ---- 768-1023: size the figure from the banner height, not from a phone-sized cap ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  body .cta-photo {
    top: auto; bottom: 0;
    height: 100%; width: auto;
    max-width: 53%;                 /* 53% of 720 = 382, just above the natural 381 - so no cap, no crop */
    object-fit: cover;
    object-position: center bottom;
  }
  body .cta-copy { max-width: 46%; }
}

/* ---- 1024-1279: let the headline wrap, and give the figure its natural width ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  body .cta-h { white-space: normal; }
  body .cta-h br.cta-break { display: block; }
  body .cta-copy { max-width: 45%; padding-inline: 44px; }
  body .cta-photo { max-width: 56%; }   /* never caps below the natural 533 - cover crops 0% */
}

.bh-carousel { touch-action: pan-y; }

/* ---------- M6: page transitions - browser-native, cross-document (LANE M) ----------
   No client router, no script: the old page cross-fades into the new one and the nav bar keeps
   its place. Browsers without the API simply navigate. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--bh-dur-enter); }
.bh-nav-wrap { view-transition-name: bh-nav; }
:root:active-view-transition .bh-grain::before,
:root:active-view-transition .bh-nav::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}