/* ============================================================
   SUPER PM — page-specific styles. Tokens where available.
   Desktop values measured from Figma 8024:226; mobile 8885:3632.
   Chrome blocks (announce, dropdown, mobile menu, footer tweaks)
   mirror pages/home/page.css until they graduate to base.css.
   ============================================================ */

/* ---------- SECTION RHYTHM ----------
   Desktop seams measured icon-to-content from Figma 8024:226. */
@media (min-width: 768px) {
  #trust-band { margin-top: 114px; }
  #meet { margin-top: 86px; }
  #product-video { margin-top: 150px; }
  #superpower-1 { margin-top: 100px; }
  #superpower-2 { margin-top: 79px; }
  #superpower-3 { margin-top: 79px; }
  #product-tour { margin-top: 86px; }
  #platform { margin-top: 86px; }
  #included { margin-top: 88px; }
  #run-it { margin-top: 90px; }
  #integrations { margin-top: 80px; }
  #security { margin-top: 94px; }
  #testimonials { margin-top: 90px; }
  #faq { margin-top: 92px; }
  #book-a-demo { margin-top: 90px; padding-bottom: 90px; } /* seams normalized to 90 per Figma fix pass (was 148/150) */
}
@media (max-width: 767px) {
  #trust-band, #meet, #product-video, #superpower-1, #superpower-2,
  #superpower-3, #product-tour, #platform, #included, #run-it,
  #integrations, #security, #testimonials, #faq,
  #book-a-demo { margin-top: 80px; }
  #book-a-demo { padding-bottom: 80px; }
}

/* ---------- Announcement bar (home chrome) ---------- */
.bh-announce {
  background: var(--bh-dark);
  padding-block: 9px;
  text-align: center;
}
.bh-announce p {
  font-size: var(--bh-fs-fine);
  font-weight: var(--bh-w-semibold);
  line-height: 17px; /* Figma: announce bar 35px = 9 + 17 + 9 */
  color: rgba(255,255,255,0.92);
}
@media (max-width: 767px) {
  .bh-announce { padding-inline: var(--bh-space-16); }
  .bh-announce p { font-size: 11px; }
}

/* ---------- Dropdown internals (home chrome) ---------- */
.bh-dd-cols { display: flex; gap: var(--bh-space-30); align-items: stretch; }
.bh-dd-col { flex: 1 1 220px; min-width: 0; }
.bh-dd-colhead { display: flex; align-items: center; gap: var(--bh-space-12); margin-bottom: var(--bh-space-12); color: inherit; text-decoration: none; }
.bh-dd-product { display: block; font-family: var(--bh-font-display); font-weight: var(--bh-w-xbold); font-size: 17px; color: var(--bh-ink); }
.bh-dd-sub { display: block; font-size: 12px; font-weight: var(--bh-w-medium); color: var(--bh-body); }
.bh-dd-rule { border: 0; border-top: 1px solid #EFECF3; margin: var(--bh-space-12) 0; }
.bh-dd-tile--lg { width: 40px; height: 40px; }
.bh-dd-tile--xl { width: 64px; height: 64px; }
.bh-dd-item .bh-dd-tile { width: 34px; height: 34px; }
.bh-dd-about .bh-dd-item .bh-dd-tile, .bh-dd-resources .bh-dd-item .bh-dd-tile { width: 40px; height: 40px; }
.bh-dd-item .bh-dd-name { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); }
/* keep name + ADD-ON pill on ONE line; long names without a pill may still wrap (review A2) */
.bh-dd-item { display: flex; align-items: center; flex-wrap: nowrap; }
.bh-dd-item:has(.bh-tag--addon) .bh-dd-name { white-space: nowrap; }
.bh-dd-item .bh-tag--addon {
  flex: 0 0 auto; white-space: nowrap;
  /* same chip as the mobile drill rows (review A2) */
  background: #F2F1F4; border: none; border-radius: var(--bh-r-6);
  padding: 3px 7px; font-size: 10px; font-weight: var(--bh-w-medium);
  letter-spacing: 0; text-transform: none; color: #828794;
}
.bh-dd-featured--crm { min-height: 390px; }
.bh-dd-featured-btn { min-width: 150px; height: 44px; padding-block: 0; font-size: 15px; }
.bh-dd-about, .bh-dd-resources {
  border-radius: var(--bh-r-20);   /* was 24 - off the 8/12/16/20 scale */
}
.bh-dd-eyebrow {
  font-size: 11px; font-weight: var(--bh-w-bold); letter-spacing: 1px;
  text-transform: uppercase; color: #99A2B3; margin-bottom: var(--bh-space-12);
}
.bh-dd-eyebrow--white { color: var(--bh-white); letter-spacing: 1.5px; font-size: 12px; }
.bh-dd-eyebrow--pink { color: var(--bh-pink); letter-spacing: 1.5px; font-size: 12px; }
.bh-dd-item { position: relative; }
.bh-dd-item .bh-tag--addon { margin-left: var(--bh-space-8); }

.bh-dd-featured {
  flex: 0 0 340px; border-radius: var(--bh-r-16); overflow: hidden;
  position: relative; display: flex; flex-direction: column;
  padding: var(--bh-space-24); gap: var(--bh-space-12);
}
.bh-dd-featured--crm {
  background: linear-gradient(233.8deg, #4C1D95 14.5%, var(--bh-violet) 85.5%);
  position: relative;
}
.bh-dd-featured--crm::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  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.10; mix-blend-mode: multiply;
}
.bh-dd-featured--crm > * { position: relative; z-index: 1; }
.bh-dd-featured-title { font-family: var(--bh-font-display); font-weight: var(--bh-w-xbold); font-size: 24px; color: var(--bh-white); }
.bh-dd-featured-title--lg { font-size: 30px; max-width: 380px; }
.bh-dd-featured-desc { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-medium); color: var(--bh-white-85); }
.bh-dd-featured-btn { background: var(--bh-white); color: #6D28D9; margin-top: auto; align-self: flex-start; padding: var(--bh-space-12) var(--bh-space-24); }
.bh-dd-featured--news, .bh-dd-featured--pillow { padding: 0; border: 1px solid rgba(0,0,0,0.06); border-radius: var(--bh-r-20); }
.bh-dd-featured--pillow { flex: 1 1 auto; }
.bh-dd-featured-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh-dd-featured-overlay {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--bh-space-12);
  justify-content: flex-end; height: 100%; min-height: 300px; padding: var(--bh-space-24);
  background: linear-gradient(180deg, rgba(20,13,31,0) 35%, rgba(20,13,31,0.92) 100%);
  border-radius: inherit;
}
.bh-dd-featured--pillow .bh-dd-featured-overlay {
  justify-content: center; align-items: flex-start;
  background: linear-gradient(90deg, rgba(26,15,36,0.94) 0%, rgba(26,15,36,0.72) 42%, rgba(26,15,36,0) 72%);
}
.bh-dd-featured--news .bh-dd-featured-title { font-size: 20px; }
.bh-dd-featured-link { font-size: 13px; font-weight: var(--bh-w-bold); color: var(--bh-pink); }
/* PMI news card — exact Figma spec (8528:2979 / 2981 / 2982 / 2983):
   32px side padding, 35px bottom, eyebrow 16 above the title, title 44 above the link,
   eyebrow + link both #F24476. */
.bh-dd-featured--news .bh-dd-featured-overlay {
  gap: 0; padding: var(--bh-space-24) var(--bh-space-32) 35px;
}
.bh-dd-featured--news .bh-dd-eyebrow--pink { color: var(--bh-pink); margin-bottom: var(--bh-space-16); }
.bh-dd-featured--news .bh-dd-featured-title { margin-bottom: 44px; }
/* the whole card is the hit area; the "Read the story" link carries it */
.bh-dd-featured--news { position: relative; }
.bh-dd-featured--news .bh-dd-featured-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.bh-dd-featured--pillow .bh-btn { align-self: flex-start; }
/* nav dropdown: extra air above the Pillow Talk Subscribe button (2026-08-27) */
.bh-dd-featured--pillow .bh-dd-featured-overlay .bh-btn { margin-top: var(--bh-space-12); }

/* ---------- Mobile menu internals (home chrome) ---------- */
.bh-mm-list { padding: var(--bh-space-16) var(--bh-space-24) 0; }
.bh-mm-list a {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; border-bottom: 1px solid #ECECEF;
  font-size: 22px; font-weight: var(--bh-w-semibold); color: var(--bh-ink);
}
.bh-mm-chev { font-size: 24px; font-weight: var(--bh-w-medium); color: var(--bh-body); }
.bh-drill { padding: 0 var(--bh-space-20) var(--bh-space-24); }
.bh-drill-header { margin: 0 calc(-1 * var(--bh-space-20)) var(--bh-space-16); }
.bh-drill-back {
  font-size: 18px; font-weight: var(--bh-w-semibold); color: var(--bh-ink);
  padding-block: var(--bh-space-12);
}
.bh-drill-title { font-size: 26px; font-weight: var(--bh-w-xbold); color: var(--bh-ink); margin-bottom: var(--bh-space-16); }
.bh-drill-group {
  font-size: 12px; font-weight: var(--bh-w-xbold); letter-spacing: 0.6px;
  color: #828794; text-transform: uppercase; margin: var(--bh-space-20) 0 var(--bh-space-12);
}
.bh-drill-row { display: flex; align-items: center; gap: var(--bh-space-12); padding-block: var(--bh-space-8); }
.bh-drill-name { display: block; font-size: 16px; font-weight: var(--bh-w-semibold); color: var(--bh-ink); }
.bh-drill-desc { display: block; font-size: 12.5px; font-weight: var(--bh-w-medium); color: #828794; }
.bh-tag--addon-m { background: #F2F1F4; border-radius: var(--bh-r-6); padding: 3px 7px; font-size: 10px; font-weight: var(--bh-w-medium); color: #828794; }
.bh-drill-card {
  display: block; border-radius: 18px; padding: var(--bh-space-24);
  margin-top: var(--bh-space-24); position: relative; overflow: hidden;
}
.bh-drill-card--crm { background: linear-gradient(90deg, var(--bh-violet) 0%, #6D32D5 100%); }
.bh-drill-card--news { background: var(--bh-dark); }
.bh-drill-card--pillow { background: var(--bh-dark); }
.bh-drill-card-eyebrow { font-size: 11px; font-weight: var(--bh-w-xbold); letter-spacing: 1px; color: rgba(255,255,255,0.85); margin-bottom: var(--bh-space-8); }
.bh-drill-card-eyebrow--pink { color: var(--bh-pink); }
.bh-drill-card-title { display: flex; align-items: center; gap: var(--bh-space-12); font-size: 20px; font-weight: var(--bh-w-xbold); color: var(--bh-white); margin-bottom: var(--bh-space-8); }
.bh-drill-card-desc { font-size: 13.5px; color: var(--bh-white-85); margin-bottom: var(--bh-space-12); }
.bh-drill-card-link { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); color: var(--bh-pink); }
.bh-drill-card-btn { padding: 9px var(--bh-space-16); font-size: 13px; border-radius: 10px; display: inline-flex; }
.bh-mm-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 18px 0 22px;
  border-bottom: 1px solid #ECECEF;
}
.bh-mm-header img { height: 22.8px; width: auto; }
.bh-mm-header-right { display: flex; align-items: center; gap: var(--bh-space-12); }
.bh-mm-cta { padding: 10px var(--bh-space-16); border-radius: 10px; font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); }
.bh-mm-close { font-size: 20px; color: var(--bh-ink); padding: var(--bh-space-8); line-height: 1; }
.bh-mobile-menu {
  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.06'/%3E%3C/svg%3E");
}

/* ---------- Shared helpers ---------- */
.accent-text { color: var(--bh-accent); }

/* ---------- Hero ---------- */
.hero-inner { position: relative; min-height: 651px; padding-top: 31px; }
.hero-copy { max-width: 660px; position: relative; z-index: 1; }
.hero-eyebrow {
  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);
}
.hero-h1 {
  margin-top: var(--bh-space-24);
  font-size: 76px; letter-spacing: -2.8px; line-height: 96px;
}
.hero-hl { padding: 0 0.21em 0.06em; line-height: 1.15; }
.hero-sub { font-size: 22px; font-weight: var(--bh-w-medium); color: var(--bh-body); margin-top: 35px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--bh-space-40); }
.hero-chip {
  display: inline-flex; align-items: center; gap: var(--bh-space-8);
  height: 40px; padding: 0 14px;
  background: var(--bh-white); border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-12);
  font-size: 15px; font-weight: var(--bh-w-semibold); color: var(--bh-ink);
}
.hero-chip-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bh-accent); color: var(--bh-white);
  font-size: 9px; font-weight: var(--bh-w-bold);
}
.hero-cta-row { display: flex; align-items: center; gap: var(--bh-space-24); margin-top: 44px; }
.hero-cta { min-width: 186px; height: 56px; font-size: 16px; }

.hero-clay { position: absolute; right: 48px; top: 12px; width: 552px; height: 607px; object-fit: contain; }
@media (max-width: 1180px) {
  .hero-clay { width: 460px; height: 506px; top: 40px; right: 8px; }
  .hero-inner { min-height: 560px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-clay { position: static; width: 420px; height: 462px; margin: var(--bh-space-24) auto 0; display: block; }
  .hero-inner { min-height: 0; }
}
@media (max-width: 767px) {
  .hero-inner { min-height: 0; padding-top: var(--bh-space-40); display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-eyebrow { font-size: var(--bh-m-fs-eyebrow); letter-spacing: var(--bh-m-ls-eyebrow); }
  .hero-copy { display: contents; }
  .hero-h1 { order: 1; margin-top: var(--bh-space-16); font-size: var(--bh-m-fs-hero); letter-spacing: -1.2px; line-height: 1.2; }

  .hero-cta-arrow { display: none; }
  .hero-hl { margin-top: 6px; padding: 0 0.3em 0.1em; transform: none; }
  .hero-sub { order: 2; font-size: var(--bh-m-fs-lead); margin-top: var(--bh-space-16); max-width: 342px; }
  .hero-clay { order: 3; position: static; width: 342px; height: 376px; margin-top: var(--bh-space-16); }
  .hero-chips { order: 4; justify-content: center; gap: 8px; margin-top: var(--bh-space-16); max-width: 342px; }
  .hero-chip {
    height: 32px; padding: 0 11px; gap: 5px;
    background: rgba(255,255,255,0.7); border-radius: 10px;
    font-size: 12.5px; font-weight: var(--bh-w-bold);
  }
  .hero-cta-row { order: 5; flex-direction: column; gap: var(--bh-space-16); margin-top: var(--bh-space-24); }
  .hero-cta { min-width: 165px; height: 53px; font-size: 16px; }

}

/* ---------- Trust logo strip ---------- */
.trust-eyebrow {
  text-align: center;
  font-size: 13px; font-weight: var(--bh-w-xbold); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--bh-body);
}
ul.trust-logos {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--bh-space-16);
  max-width: 1256px; margin: var(--bh-space-30) auto 0;
}
.trust-chip {
  display: flex; align-items: center; justify-content: center;
  height: 92px; background: var(--bh-white);
  border: 1px solid var(--bh-border); border-radius: var(--bh-r-12);
  box-shadow: var(--bh-shadow-lift);
}
.trust-chip img { max-width: 140px; max-height: 52px; width: auto; height: auto; object-fit: cover; }
@media (max-width: 767px) {
  .trust-eyebrow { font-size: 11.5px; letter-spacing: 1px; color: #999eab; }
  ul.trust-logos { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: var(--bh-space-30); }
  .trust-chip { height: 62px; border-radius: 10px; border-color: #edf0f5; box-shadow: none; }
  .trust-chip img { max-width: 79px; max-height: 30px; }
}

/* ---------- Meet Super PM ---------- */
.meet-body { max-width: 760px; font-size: 20px; line-height: 33px; }
@media (min-width: 768px) {
  .meet-body--2 { margin-top: calc(-1 * var(--bh-space-16)); }
}
@media (max-width: 767px) {
  .meet-body { font-size: 16px; line-height: 1.5; }
}

/* ---------- Product video ---------- */
.video-card {
  position: relative; overflow: hidden; border-radius: var(--bh-r-16);
  background: var(--bh-dark);
}
.video-still { width: 100%; height: auto; display: block; }
.video-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(300px 150px at 50% 50%, rgba(10,5,18,0.55), rgba(10,5,18,0) 100%);
}
.video-play {
  position: absolute; left: 50%; top: 50%;
  width: 72px; height: 72px; margin: -50px 0 0 -36px;
  border-radius: 50%; background: var(--bh-accent);
  display: flex; align-items: center; justify-content: center;
}
.video-play-glyph { color: var(--bh-white); font-size: 22px; padding-left: 4px; }
.video-caption {
  position: absolute; left: 0; right: 0; top: 55%;
  text-align: center;
  font-size: var(--bh-fs-eyebrow); font-weight: var(--bh-w-xbold); letter-spacing: 1.5px;
  color: rgba(255,255,255,0.85);
}
@media (max-width: 767px) {
  .video-card { max-width: 342px; margin-inline: auto; }
  .video-play { width: 66px; height: 66px; margin: -48px 0 0 -33px; background: var(--bh-white); }
  .video-play-glyph { color: var(--bh-ink); font-size: 24px; }
  .video-caption { top: 62%; font-size: var(--bh-fs-fine); letter-spacing: 1px; }
}

/* ---------- Superpower sections ---------- */
.sp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 80px; padding-inline: var(--bh-space-20);
}
.sp--text-left .sp-copy { grid-area: 1 / 1; }
.sp--text-left .sp-acc { grid-area: 2 / 1; }
.sp--text-left .sp-training { grid-area: 3 / 1; }
.sp--text-left .sp-image { grid-area: 2 / 2 / span 2; } /* spans accordion + training (review E2) */
.sp--text-right .sp-copy { grid-area: 1 / 2; }
.sp--text-right .sp-acc { grid-area: 2 / 2; }
.sp--text-right .sp-training { grid-area: 3 / 2; }
.sp--text-right .sp-image { grid-area: 2 / 1 / span 2; } /* spans accordion + training (review E2) */
.sp-panel { display: contents; }
.sp-icon { width: 48px; height: 48px; object-fit: cover; margin-bottom: var(--bh-space-16); }
.sp-eyebrow { letter-spacing: 1.5px; }
.sp-title {
  font-size: 46px; letter-spacing: -1.2px; margin-top: var(--bh-space-16);
}
.sp-desc { font-size: 17px; line-height: 27px; max-width: 540px; margin-top: var(--bh-space-20); }
.sp-image {
  align-self: stretch;                 /* top and bottom track the accordion (review E2) */
  display: flex; align-items: center; justify-content: center;
  background: #f7f8fb; border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  padding: var(--bh-space-32);
  margin-top: 26px;
}
.sp-image { position: relative; min-height: 0; }
.sp-image img {
  /* the inner image frame keeps its size; only the artwork scales to fit
     inside it (review E2) */
  position: absolute; inset: var(--bh-space-32);
  width: calc(100% - 2 * var(--bh-space-32)); height: calc(100% - 2 * var(--bh-space-32));
  object-fit: cover;
}
.sp-acc { margin-top: 26px; }
/* Superpower accordion skin (shared .bh-accordion behavior) */
.sp-acc .bh-acc-item {
  border: none; box-shadow: var(--bh-shadow-card);
}
.sp-acc .bh-acc-item + .bh-acc-item { margin-top: 10px; }
.sp-acc .bh-acc-toggle { padding: 17px 24px 17px 28px; font-size: 17px; }
.sp-acc .bh-acc-item.is-open { border: none; }
.sp-acc .bh-acc-item.is-open .bh-acc-toggle { padding-top: 18px; font-size: 18px; color: var(--bh-accent); }
.sp-acc .bh-acc-body > p { padding: 0 28px 24px; font-size: 15px; }
.sp-training {
  margin-top: 10px;
  background: #fdecf1; border-radius: var(--bh-r-16);
  padding: 18px 28px;
}
.sp-training-eyebrow {
  font-size: 12.5px; font-weight: var(--bh-w-xbold); letter-spacing: 1px;
  text-transform: uppercase; color: var(--bh-accent);
}
.sp-training-body { font-size: 15px; font-weight: var(--bh-w-semibold); color: var(--bh-body); margin-top: 6px; }
/* Accordion glyphs: + closed / − open, no rotation (Figma) */
.bh-acc-glyph { font-size: 0; }
.bh-acc-glyph::before { content: '+'; font-size: 18px; }
.bh-acc-item.is-open .bh-acc-glyph { transform: none; }
.bh-acc-item.is-open .bh-acc-glyph::before { content: '−'; }
.sp-acc .bh-acc-glyph { width: 30px; height: 30px; background: transparent; color: var(--bh-body); }
.sp-acc .bh-acc-item.is-open .bh-acc-glyph { background: var(--bh-accent); color: var(--bh-white); }
@media (max-width: 767px) {
  /* stacked layout: the image returns to normal flow (review E2) */
  .sp-image { position: static; }
  .sp-image img { position: static; inset: auto; width: 100%; height: auto; object-fit: cover; }
  .sp-grid { display: block; padding-inline: 0; }
  .sp-icon { width: 34px; height: 34px; margin-bottom: var(--bh-space-16); }
  .sp-title { font-size: var(--bh-m-fs-h2); letter-spacing: -0.5px; margin-top: var(--bh-space-16); }
  .sp-desc { font-size: 16px; line-height: 1.5; margin-top: var(--bh-space-16); }
  .sp-panel {
    display: block; margin-top: var(--bh-space-16);
    background: var(--bh-white); border: 1px solid #e5e8ed; border-radius: 18px;
    padding: var(--bh-space-20);
  }
  .sp-image {
    margin-top: 0; padding: 0; box-shadow: none;
    border: 1px solid #e5e8ed; border-radius: 14px;
    background: #f7f8fb; overflow: hidden;
  }
  .sp-acc { margin-top: var(--bh-space-8); }
  .sp-acc .bh-acc-item { box-shadow: none; border-radius: 0; background: transparent; }
  .sp-acc .bh-acc-item + .bh-acc-item { margin-top: 0; border-top: 1px solid #e5e8ed; }
  .sp-acc .bh-acc-toggle { padding: 16px 0; font-size: 18px; }
  .sp-acc .bh-acc-item.is-open .bh-acc-toggle { padding-top: var(--bh-space-16); font-size: 19px; }
  .sp-acc .bh-acc-body > p { padding: 0 0 16px; font-size: 16px; }
  .sp-acc .bh-acc-glyph, .faq-list .bh-acc-glyph { width: 26px; height: 26px; }
  .sp-acc .bh-acc-glyph::before, .faq-list .bh-acc-glyph::before { font-size: 16px; }
  .sp-training { margin-top: var(--bh-space-40); border-radius: var(--bh-r-12); padding: 14px 18px 18px; }
  .sp-training-eyebrow { font-size: 11px; }
  .sp-training-body { font-size: 14.5px; }
}

/* ---------- Product tour ---------- */
.tour-screen {
  max-width: 1140px; margin: 32px auto 0;
  background: var(--bh-white);
  border: 1px solid var(--bh-border); border-radius: var(--bh-r-12);
  box-shadow: var(--bh-shadow-card);
  overflow: hidden;
}
.tour-bar {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 44px; padding-left: var(--bh-space-16);
  background: #f7f8fb;
}
.tour-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tour-dot--r { background: #fa7370; } .tour-dot--y { background: #fcc24a; } .tour-dot--g { background: #59cc6b; }
.tour-url {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 260px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bh-white); border: 1px solid var(--bh-border-pill); border-radius: var(--bh-r-6);
  font-size: 11.5px; font-weight: var(--bh-w-semibold); color: var(--bh-body);
}
.tour-body { display: flex; height: 496px; }
.tour-side { flex: 0 0 200px; background: #f7f8fb; padding: var(--bh-space-24) 14px 0; }
.tour-side-item {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding-left: 14px; margin-bottom: 10px;
  font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); color: var(--bh-body);
}
.tour-side-item.is-active {
  background: #fdecf1; border-radius: 10px;
  color: var(--bh-accent); font-weight: var(--bh-w-bold);
}
.tour-side-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bh-body); }
.tour-side-item.is-active .tour-side-dot { background: var(--bh-accent); }
.tour-main { flex: 1 1 auto; padding: var(--bh-space-32); }
.tour-main-title { font-size: 19px; font-weight: var(--bh-w-bold); color: var(--bh-ink); }
.tour-main-sub { font-size: 12.5px; color: var(--bh-body); margin-top: 4px; }
.tour-row {
  display: flex; align-items: center; gap: var(--bh-space-12);
  width: 100%; max-width: 560px; height: 54px; padding: 0 18px;
  background: var(--bh-white); border: 1px solid var(--bh-border); border-radius: 10px;
  margin-top: var(--bh-space-12);
}
.tour-row:first-of-type { margin-top: 18px; }
.tour-row-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }
.tour-row-text { font-size: 13.5px; font-weight: var(--bh-w-semibold); color: var(--bh-ink); }
.tour-pill {
  margin-left: auto;
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 14px; border-radius: var(--bh-r-pill);
  font-size: 11.5px; font-weight: var(--bh-w-bold);
}
.tour-pill--risk { background: #fdecf1; color: var(--bh-pink); }
.tour-pill--ready { background: #eaf6f2; color: var(--bh-green); }
.tour-pill--progress { background: #fef4e0; color: #f5b840; }
.tour-main-note { font-size: 12px; color: var(--bh-body); margin-top: 26px; }
.tour-panel {
  flex: 0 0 286px; align-self: flex-start;
  margin: var(--bh-space-32) var(--bh-space-30) 0 0;
  background: #f7f8fb; border-radius: var(--bh-r-12);
  padding: var(--bh-space-24);
}
.tour-panel-head { display: flex; align-items: center; gap: var(--bh-space-12); }
.tour-avatar {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fdecf1; color: var(--bh-accent);
  font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-xbold);
}
.tour-panel-name { display: block; font-size: 15px; font-weight: var(--bh-w-bold); color: var(--bh-ink); }
.tour-panel-meta { display: block; font-size: 11.5px; color: var(--bh-body); }
.tour-risk-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; }
.tour-risk-label { font-size: 10.5px; font-weight: var(--bh-w-xbold); letter-spacing: 1px; color: var(--bh-body); }
.tour-risk-value { font-size: 24px; font-weight: var(--bh-w-bold); color: var(--bh-accent); }
.tour-risk-bar { height: 8px; border-radius: 4px; background: var(--bh-border); margin-top: var(--bh-space-8); overflow: hidden; }
.tour-risk-bar span { display: block; width: 82%; height: 100%; border-radius: 4px; background: var(--bh-accent); }
.tour-panel-note { font-size: 12px; line-height: 19px; color: var(--bh-body); margin-top: var(--bh-space-16); }
.tour-panel-cta {
  display: flex; align-items: center; justify-content: center;
  height: 46px; margin-top: var(--bh-space-24); border-radius: var(--bh-r-pill);
  background: var(--bh-accent); color: var(--bh-white);
  font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-bold);
}
ul.tour-labels {
  display: flex; justify-content: center; gap: var(--bh-space-30);
  margin-top: 34px;
}
.tour-label {
  display: flex; align-items: center; justify-content: center;
  width: 340px; height: 64px;
  background: var(--bh-white); border: 1.5px solid var(--bh-border); border-radius: var(--bh-r-12);
  font-size: 16.5px; font-weight: var(--bh-w-bold); color: var(--bh-ink);
}
.tour-screen-m { display: none; }
@media (max-width: 767px) {
  .tour-screen, ul.tour-labels { display: none; }
  .tour-screen-m {
    display: block; max-width: 342px; margin: var(--bh-space-16) auto 0;
    background: var(--bh-white); border: 1px solid var(--bh-border-pill); border-radius: var(--bh-r-20);
    overflow: hidden; text-align: left;
  }
  .tm-bar {
    display: flex; align-items: center; gap: 6px;
    height: 100px; padding: 0 14px;
    background: #f5f7fa;
  }
  .tm-bar .tour-dot { width: 8px; height: 8px; }
  .tm-url {
    flex: 1 1 auto; height: 26px; margin-left: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bh-white); border: 1px solid var(--bh-border-pill); border-radius: 7px;
    font-size: 11.5px; font-weight: var(--bh-w-semibold); color: var(--bh-body);
  }
  .tm-tabs { display: flex; gap: var(--bh-space-8); height: 100px; padding: var(--bh-space-12) 14px 0; background: var(--bh-white); }
  .tm-tab {
    display: inline-flex; align-items: center;
    height: 32px; padding: 0 13px; border-radius: 9px;
    background: #f5f7fa; font-size: 12.5px; font-weight: var(--bh-w-semibold); color: var(--bh-body);
  }
  .tm-tab.is-active { background: var(--bh-accent); color: var(--bh-white); font-weight: var(--bh-w-bold); }
  .tm-content { background: #f5f7fa; padding: 6px var(--bh-space-16) 18px; }
  .tm-title { font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 18px; color: var(--bh-ink); }
  .tm-sub { font-size: 12.5px; color: var(--bh-body); margin-top: 3px; }
  .tm-row {
    display: flex; align-items: center; gap: 10px;
    height: 60px; padding: 0 var(--bh-space-12);
    background: var(--bh-white); border: 1px solid var(--bh-border-pill); border-radius: var(--bh-r-12);
    margin-top: var(--bh-space-12);
  }
  .tm-row:first-of-type { margin-top: 18px; }
  .tm-row-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
  .tm-row-col { display: flex; flex-direction: column; min-width: 0; }
  .tm-row-name { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-bold); color: var(--bh-ink); }
  .tm-row-meta { font-size: 12px; color: var(--bh-body); }
  .tm-chip {
    margin-left: auto;
    display: inline-flex; align-items: center;
    height: 24px; padding: 0 9px; border-radius: 7px;
    font-size: 11px; font-weight: var(--bh-w-bold);
  }
  .tm-chip--risk { background: rgba(242,68,118,0.14); color: var(--bh-pink); }
  .tm-chip--healthy { background: #eaf6f2; color: var(--bh-green); }
  .tm-chip--watch { background: rgba(242,153,51,0.14); color: #f29933; }
  .tm-highlight {
    background: var(--bh-white); border: 1px solid var(--bh-accent); border-radius: 14px;
    padding: 14px; margin-top: var(--bh-space-12);
  }
  .tm-hl-head { display: flex; align-items: center; gap: 10px; padding-block: var(--bh-space-16); }
  .tm-avatar {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bh-accent); color: var(--bh-white);
    font-size: 13px; font-weight: var(--bh-w-xbold);
  }
  .tm-hl-col { display: flex; flex-direction: column; }
  .tm-score { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
  .tm-score-label { font-size: 9px; font-weight: var(--bh-w-xbold); letter-spacing: 0.5px; color: var(--bh-body); }
  .tm-score-value { font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 22px; color: var(--bh-accent); }
  .tm-cta {
    display: flex; align-items: center; justify-content: center;
    height: 42px; margin-top: 10px; border-radius: 10px;
    background: var(--bh-accent); color: var(--bh-white);
    font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-bold);
  }
  .tm-note { font-size: 12px; color: var(--bh-body); margin-top: var(--bh-space-12); }
}

/* ---------- Full platform cards ---------- */
ul.platform-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bh-space-30);
  max-width: 1320px; margin: var(--bh-space-40) auto 0;
}
.platform-card {
  background: var(--bh-white); border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  padding: 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.platform-icon { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; }
.platform-title { font-family: var(--bh-font-body); font-size: 21px; font-weight: var(--bh-w-bold); letter-spacing: 0; margin-top: var(--bh-space-16); }
.platform-desc { font-size: 15px; margin-top: var(--bh-space-8); }
@media (max-width: 1023px) {
  ul.platform-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-24); }
  .platform-card { padding: 23px; }
}

/* ---------- Included tools ---------- */
.included-sub { max-width: 720px; font-size: 20px; line-height: 33px; }
.tools-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bh-space-40);
  max-width: 1300px; margin: var(--bh-space-24) auto 0;
}
.tool-card {
  background: var(--bh-white); border: 1px solid var(--bh-border-pill); border-radius: var(--bh-r-16);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.tool-image { width: 100%; height: 270px; object-fit: cover; }
.tool-content { padding: 26px 34px 34px; display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; }
.tool-pill {
  border: 1px solid var(--bh-accent); border-radius: var(--bh-r-8);
  padding: 5px 12px;
  font-size: 11px; font-weight: var(--bh-w-xbold); letter-spacing: 0.5px; color: var(--bh-accent);
}
.tool-title { font-size: 27px; letter-spacing: -0.5px; margin-top: 14px; }
.tool-desc { font-size: 16px; margin-top: 14px; }
ul.tool-bullets { margin-top: 14px; }
.tool-bullets li {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; color: var(--bh-ink);
}
.tool-bullets li + li { margin-top: 11px; }
.tool-check {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bh-accent); color: var(--bh-white);
  font-size: 12px; font-weight: var(--bh-w-bold);
}
.tool-cta { margin-top: 38px; height: 51px; min-width: 175px; font-size: 16px; }
@media (max-width: 1023px) {
  .tools-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); }
  .included-sub { font-size: 16px; line-height: 1.5; }
  .tool-image { height: 147px; }
  .tool-content { padding: 26px 34px 34px; }
  .tool-title { font-size: 22px; }
  .tool-cta { margin-top: 24px; height: 48px; min-width: 152px; font-size: 15px; }
}

/* ---------- Run it your way ---------- */
.runit-sub { font-size: 20px; }
.runit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bh-space-40);
  max-width: 1260px; margin: 54px auto 0;
}
.runit-card { border-radius: var(--bh-r-20); padding: var(--bh-space-32); }
.runit-card--human { background: #eaedf2; }
.runit-card--ai { background: var(--bh-accent); }
.runit-inner {
  background: var(--bh-white); border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);   /* matches super-bdm / super-broker */
  padding: var(--bh-space-32) 42px;
  height: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
}
.runit-eyebrow { font-size: var(--bh-fs-eyebrow); font-weight: var(--bh-w-xbold); letter-spacing: 1.5px; }
.runit-eyebrow--grey { color: var(--bh-body); }
.runit-eyebrow--pink { color: var(--bh-accent); }
.runit-title { font-size: 36px; letter-spacing: -1px; margin-top: var(--bh-space-16); }
ul.runit-list { margin-top: 46px; }
.runit-list li {
  display: flex; align-items: center; gap: var(--bh-space-16);
  font-size: 17.5px; font-weight: var(--bh-w-semibold); color: var(--bh-ink);
}
.runit-list li + li { margin-top: 28px; }
.runit-check {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: var(--bh-w-bold);
}
.runit-check--grey { background: #e5e8f0; color: var(--bh-body); }
.runit-check--pink { background: var(--bh-accent); color: var(--bh-white); }
.runit-cta { margin-top: 80px; min-width: 190px; height: 56px; font-size: 16.5px; }
.runit-cta--human { background: var(--bh-accent); color: var(--bh-white); box-shadow: var(--bh-shadow-card); }
.runit-note { text-align: center; font-size: var(--bh-fs-body); font-weight: var(--bh-w-semibold); margin-top: 48px; }
@media (max-width: 1023px) {
  .runit-sub { font-size: 16px; }
  .runit-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-16); }
  .runit-card { border-radius: 18px; padding: 10px; }
  .runit-inner { border-radius: 14px; box-shadow: none; padding: var(--bh-space-24) 22px; }
  .runit-eyebrow { font-size: 11px; letter-spacing: 1px; }
  .runit-title { font-size: 22px; letter-spacing: -0.5px; margin-top: var(--bh-space-12); }
  ul.runit-list { margin-top: var(--bh-space-16); }
  .runit-list li { font-size: 16px; font-weight: var(--bh-w-regular); gap: 10px; }
  .runit-list li + li { margin-top: 14px; }
  .runit-check { flex-basis: 22px; width: 22px; height: 22px; font-size: 12px; }
  .runit-check--grey { background: #d9dbe3; color: var(--bh-white); }
  .runit-cta { margin-top: var(--bh-space-24); width: 100%; min-width: 0; height: 46px; font-size: 15px; }
  .runit-cta--human { background: var(--bh-white); color: var(--bh-ink); border: 1px solid #d1d4db; box-shadow: none; }
  .runit-note { font-size: 16px; font-weight: var(--bh-w-regular); margin-top: var(--bh-space-16); }
}

/* ---------- Integrations ---------- */
.int-body { max-width: 760px; font-size: 21px; line-height: 35px; }
.int-body-mobile { display: none; }
ul.int-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bh-space-48) 50px;
  max-width: 1150px; margin: 52px auto 0;
}
.int-chip {
  display: flex; align-items: center; justify-content: center;
  height: 110px; background: var(--bh-white);
  border: 1.5px solid var(--bh-border-chip); border-radius: var(--bh-r-12);
}
.int-chip img { max-width: 190px; max-height: 44px; width: auto; height: auto; object-fit: cover; }
@media (max-width: 767px) {
  .int-body-desktop { display: none; }
  .int-body-mobile { display: inline; }
  .int-body { font-size: 16px; line-height: 1.5; }
  ul.int-grid { grid-template-columns: 1fr 1fr; gap: var(--bh-space-12); margin-top: var(--bh-space-24); }
  .int-chip { height: 73px; border-radius: var(--bh-r-8); border-width: 1px; }
  .int-chip img { max-width: 102px; max-height: 29px; }
}

/* ---------- Security ---------- */
.security-sub { font-size: 20px; }
ul.security-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bh-space-20);
  max-width: 1340px; margin: var(--bh-space-60) auto 0;
}
.security-card {
  background: var(--bh-white); border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  padding: 36px 32px;
}
.security-icon { height: 64px; width: auto; object-fit: cover; }
.security-title { font-family: var(--bh-font-body); font-size: 22px; font-weight: var(--bh-w-bold); letter-spacing: 0; margin-top: 28px; }
.security-desc { font-size: 16px; margin-top: var(--bh-space-12); }
@media (max-width: 1023px) {
  ul.security-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-24); }
  .security-sub { font-size: 16px; }
}

/* ---------- Testimonials (home pattern) ---------- */
.testi-carousel { position: relative; }
.testi-slide { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: var(--bh-space-32); }
.testi-quote {
  font-family: var(--bh-font-display); font-weight: var(--bh-w-semibold);
  font-size: 36px; line-height: 53px; color: var(--bh-ink); max-width: 940px;
}
.testi-caption { display: flex; flex-direction: column; align-items: center; margin-top: var(--bh-space-80); }
.testi-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.testi-name { font-size: 21px; font-weight: var(--bh-w-bold); color: var(--bh-ink); margin-top: var(--bh-space-16); }
.testi-role { font-size: 15.5px; color: var(--bh-body); margin-top: var(--bh-space-4); }
.testi-arrow {
  position: absolute; top: 22%; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: var(--bh-w-bold);
}
.testi-arrow--prev { left: 100px; background: var(--bh-white); border: 1px solid var(--bh-border); color: var(--bh-ink); }
.testi-arrow--next { right: 100px; background: var(--bh-accent); color: var(--bh-white); }
.testi-arrow .arrow-glyph-mobile { display: none; }
.testi-nav-row { display: contents; }
@media (max-width: 767px) {
  #testimonials .bh-h2 { font-size: 27px; }
  .testi-carousel {
    margin-top: var(--bh-space-16); background: var(--bh-white);
    border-radius: var(--bh-r-16); box-shadow: var(--bh-shadow-btn-sm);
    padding: 0;
  }
  .testi-slide { padding: var(--bh-space-24) var(--bh-space-24) 0; }
  .testi-quote { font-family: var(--bh-font-body); font-weight: var(--bh-w-medium); font-size: 16px; line-height: 1.5; }
  .testi-quote::before { content: '“'; }
  .testi-quote::after { content: '”'; }
  .testi-caption { margin-top: var(--bh-space-20); }
  .testi-avatar { width: 46px; height: 46px; }
  .testi-name { font-size: 15px; margin-top: var(--bh-space-8); }
  .testi-role { font-size: 13px; }
  .testi-nav-row {
    display: flex; align-items: center; justify-content: center;
    gap: var(--bh-space-16); margin: var(--bh-space-20) 0 var(--bh-space-24);
  }
  .testi-arrow { position: static; width: 42px; height: 42px; background: var(--bh-white); border: 1px solid #E5E5F0; color: var(--bh-accent); font-size: 18px; }
  .testi-arrow .arrow-glyph-desktop { display: none; }
  .testi-arrow .arrow-glyph-mobile { display: inline; }
  .bh-car-controls { margin-top: 0; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 1000px; margin: 42px auto 0; }
.faq-list .bh-acc-item { border-color: #e5e8ee; }
.faq-list .bh-acc-item + .bh-acc-item { margin-top: 14px; }
.faq-list .bh-acc-item.is-open { border-color: #e5e8ee; }
.faq-list .bh-acc-toggle { padding: 16px 24px 16px 28px; font-size: 17px; }
.faq-list .bh-acc-item.is-open .bh-acc-toggle { padding-top: 24px; }
.faq-list .bh-acc-glyph { width: 30px; height: 30px; background: transparent; color: var(--bh-ink); }
.faq-list .bh-acc-item.is-open .bh-acc-glyph { background: var(--bh-accent); color: var(--bh-white); }
.faq-list .bh-acc-body > p { padding: 0 48px 24px 28px; font-size: var(--bh-fs-body); }
@media (max-width: 767px) {
  .faq-list { margin-top: var(--bh-space-16); }
  .faq-list .bh-acc-item { border-color: #ebedf2; }
  .faq-list .bh-acc-item + .bh-acc-item { margin-top: var(--bh-space-16); }
  .faq-list .bh-acc-toggle { padding: 16px 20px; font-size: 16px; }
  .faq-list .bh-acc-item.is-open .bh-acc-toggle { padding-top: 18px; }
  .faq-list .bh-acc-body > p { padding: 0 20px 18px; font-size: 16px; }
}

/* ---------- CTA banner (Banner v2) ---------- */
.cta-banner {
  position: relative; overflow: hidden; border-radius: var(--bh-r-16);
  min-height: 560px;
  background: linear-gradient(90deg, #521728 0%, #952A49 50%, var(--bh-pink) 100%);
  box-shadow: var(--bh-shadow-lift);
  display: flex; align-items: center;
}
.cta-copy { position: relative; z-index: 1; max-width: 700px; padding: var(--bh-space-60) 72px; }
.cta-h { font-size: 52px; letter-spacing: -1px; line-height: 1.02; color: var(--bh-white); max-width: 620px; }
.cta-break { display: none; }
.cta-body { font-size: 20px; line-height: 1.45; color: rgba(255,255,255,0.85); max-width: 520px; margin-top: var(--bh-space-24); }
.cta-btn { background: var(--bh-white); color: var(--bh-pink); margin-top: var(--bh-space-24); min-width: 169px; height: 60px; font-size: 18px; }
.cta-photo { position: absolute; right: 0; top: 0; height: 100%; width: auto; object-fit: cover; }
@media (max-width: 1023px) {
  .cta-break { display: inline; } .cta-h br.cta-break { display: block; }
  .cta-banner {
    min-height: 400px; border-radius: var(--bh-r-16);
    background: linear-gradient(131.2deg, #3A0517 0%, #690A2A 50%, var(--bh-pink) 100%);
    align-items: flex-start;
    max-width: 342px; margin-inline: auto;
  }
  .cta-copy { padding: var(--bh-space-40) var(--bh-space-24); }
  .cta-h { font-size: 30px; letter-spacing: -0.5px; line-height: 1.04; white-space: normal; }
  .cta-body { font-size: 16px; color: var(--bh-white); margin-top: var(--bh-space-16); }
  .cta-btn { margin-top: var(--bh-space-16); min-width: 143px; height: 46px; font-size: 15px; }
  .cta-photo { top: auto; bottom: 0; height: 218px; width: 215px; object-fit: cover; object-position: bottom right; }
}

/* ---------- Footer page-level tweaks (home chrome) ---------- */
.bh-footer-tagline { font-size: var(--bh-fs-body-sm); color: rgba(244,242,248,0.75); }
.bh-footer-social { display: flex; gap: var(--bh-space-16); align-items: flex-end; margin-top: var(--bh-space-8); }
/* social glyph art has differing heights — normalise so baselines align (review A6) */
.bh-footer-social a { display: inline-flex; align-items: flex-end; }
/* keep each glyph at its designed size; only align their baselines (review A6) */
.bh-footer-social img { display: block; }
/* the narrow "f" makes the f→YouTube gap read wider than in→f even at equal
   spacing, so YouTube is pulled in optically (review A6) */
.bh-footer-social a:last-child { margin-left: -5px; }
.bh-footer-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bh-footer-form { display: flex; gap: var(--bh-space-8); align-items: flex-start; flex-wrap: wrap; }
.bh-footer-form .bh-field { width: 220px; }
.bh-footer-input { width: 100%; height: 44px; padding-block: 0; border-radius: var(--bh-r-8); font-size: 13px; }
.bh-footer-signup { height: 44px; min-width: 120px; padding: 0 var(--bh-space-24); border-radius: var(--bh-r-8); font-size: 13px; }
.bh-footer-legal { display: flex; gap: var(--bh-space-30); }
@media (max-width: 767px) {
  .bh-footer-form { width: 100%; }
  .bh-footer-form .bh-field { width: 100%; }
  .bh-footer-input { width: 100%; height: 46px; }
  .bh-footer-signup { width: 100%; height: 46px; }
  .bh-footer-tagline { font-size: 16px; }
  .bh-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Superpower accordion image swap (page.js) ---------- */
[data-sp-target] { transition: opacity 180ms ease; }
[data-sp-target].is-sp-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  [data-sp-target] { transition: none; }
  [data-sp-target].is-sp-fading { opacity: 1; }
}
/* the Figma superpower exports are square-cornered; the card rounds them in CSS */
.sp-image img { border-radius: var(--bh-r-12); }

/* === CTA banner - width-proof geometry (2026-08-26, W01) ===
   Photo and copy were both sized in fixed px and independent of the banner width,
   so they overlapped by (copyMax + photoWidth - bannerWidth): 277px at 1024.
   Figma sizes both as a proportion of the banner - do the same. */
.cta-copy  { max-width: min(700px, 54%); }
.cta-photo { max-width: 44%; object-fit: cover; object-position: center right; }
@media (max-width: 1023px) {
  .cta-copy  { max-width: 100%; }
  /* Figma: 215/350 = 61.4% of the banner, not a fixed 215px. Scaling with the
     banner moves the photo's left edge AWAY from the button as the screen
     narrows, instead of under it. The 215px ceiling matters: this branch also
     covers 768-1023, where the banner is 720px wide and a bare 61.4% would blow
     the photo up to 442px and push it back under the headline. */
  .cta-photo { width: 61.4%; max-width: 215px; height: auto; object-fit: contain; object-position: bottom right; }
}
@media (min-width: 700px) and (max-width: 1023px) {
  /* Banner is ~720px here but still on the mobile composition: the copy would run
     full width and meet the photo. Reserve the photo's column. */
  .cta-copy { max-width: 62%; }
}

/* === logo strip - width-proof grid (2026-08-26, W02) ===
   `repeat(6, 1fr)` cannot shrink: a 1fr track has an implicit min-width:auto, so
   six 140px logos hold the row at ~840px and it overflows a 720px container at 768.
   minmax(0, 1fr) allows the track to shrink; the 768-1023 rule gives the tablet
   band its own 5-up layout instead of inheriting the desktop 6-up. */
.trust-grid, .trusted-grid, ul.trust-logos {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.trust-chip img, .trusted-tile img, .trusted-chip img { max-width: 100%; }
@media (min-width: 768px) and (max-width: 1023px) {
  .trust-grid, .trusted-grid, ul.trust-logos {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }
  .trust-chip, .trusted-tile, .trusted-chip { height: 68px; }
  .trust-chip img, .trusted-tile img, .trusted-chip img { max-width: 92px; max-height: 34px; }
}

/* === int-grid width-proof (2026-08-26, W13b) ===
   Same min-content trap as the logo strip: repeat(4, 1fr) cannot shrink, so the
   integration chips ran 76px past the viewport at 768. It was previously masked by
   the larger trust-chip overflow on the same page. */
ul.int-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.int-chip { min-width: 0; }
.int-chip img { max-width: 100%; }
@media (min-width: 768px) and (max-width: 1023px) {
  ul.int-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bh-space-24) 20px; }
}

/* === superpower training box + panel seam (2026-08-26, W04) ===
   See tools/fix_w04.js for the measurements. Applied inside the mobile band only —
   the desktop layout of this section was not flagged and must not move. */
@media (max-width: 767px) {
  /* T24 - no training box on any of the three product pages had a shadow */
  .sp-training { box-shadow: var(--bh-shadow-card); }
}

@media (max-width: 767px) {
  /* T21/T22/T28 - margin-top:40px sat on top of .sp-inner's 14px row-gap, so the
     real gap measured 54px. 10px + 14px row-gap = the 24px Super BDM uses. */
  .sp-training { margin-top: 10px; }
}

/* === testimonial - no card (2026-08-26, W06) ===
   The white card around the testimonial exists in no Figma frame. Super BDM never
   had it and is the reference. Removed here so all four pages agree. */
@media (max-width: 767px) {
  .testi-carousel {
    background: none;
    border-radius: 0;
    box-shadow: none;
  }
  .testi-slide { padding-left: 0; padding-right: 0; }
}

/* === tour row fits the tablet band (2026-08-26, W14) ===
   At 768 the desktop browser-window graphic left .tour-main just 202px - about half
   what the rows need - so a child ran 49px past the row on Super CRM. The rows keep
   their natural single-line height; the tablet band just gives them room by
   narrowing the side rail and the padding. .tour-main 202px -> 262px. */
@media (min-width: 768px) and (max-width: 1023px) {
  .tour-side { flex: 0 0 140px; padding-inline: var(--bh-space-8); }
  .tour-side-item { padding-inline: var(--bh-space-8); gap: var(--bh-space-8); }
  .tour-main { padding: var(--bh-space-20); }
  .tour-row > * { min-width: 0; }
  .tour-row-label { overflow-wrap: break-word; }
}

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

/* T23 + A16 - the superpower header icon uses a DIFFERENT object-fit on each of the
   three product pages (fill on Super BDM, cover on Super PM, contain on Super
   Broker) and two of the three ship non-square sources: Super PM's are 199x238 and
   Super Broker's 160x204, forced into a 34x34 box. With object-fit:cover that crops
   the top and bottom off - which is exactly the "icons are cut off from the top"
   Lior reported on Super PM. contain shows the whole icon and behaves identically
   for Super BDM's square 96x96 source, so one value works for all three. */
.sp-icon, .sp-eyebrow-icon, .sp-head img, .sp-text img, .sp-copy img, .sp-panel > img {
  object-fit: contain;
}

/* === bullet text centred on its marker (2026-08-26, T29) ===
   Lior: the text is centred to the bullet on its left. These lists were
   align-items:flex-start, so on a two-line item the check hugged line one and the
   text hung below it. */
.runit-list li,
.runit-checks li,
.tool-bullets li,
.adv-checks li,
.kit-list li,
.sec-list li {
  align-items: center;
}

/* === logo rows - contain, centred, optically even (2026-08-26) ===
   A grid cannot centre a short final row - the tracks are fixed, so the leftover
   logos range left. Flex-wrap with the same per-item basis keeps full rows identical
   and centres whatever is left over. */
.trust-grid, .trusted-grid, ul.trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.trust-grid > *, .trusted-grid > *, ul.trust-logos > * {
  flex: 0 1 calc((100% - 5 * var(--bh-space-16)) / 6);
  min-width: 0;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .trust-grid > *, .trusted-grid > *, ul.trust-logos > * {
    flex: 0 1 calc((100% - 4 * 12px) / 5);
  }
}
@media (max-width: 767px) {
  .trust-grid > *, .trusted-grid > *, ul.trust-logos > * {
    flex: 0 1 calc((100% - 2 * 10px) / 3);
  }
}

/* === integration logos - contain, not cropped (2026-08-26) ===
   .int-chip img was object-fit:COVER. Rentvine is 266x39 (aspect 6.82) against
   appfolio 2.49 / buildium 3.09 / doorloop 3.64, so cover cropped the widest logo and
   it spilled its frame. Logos are never cropped. */
.int-chip img {
  object-fit: contain;
  /* MY OWN W13b RULE CAUSED THE REST OF THIS. It set max-width:100%, which overrode
     the original 190px cap, so any logo that is width-limited rather than height-limited
     fills its chip edge to edge. Rentvine is the only one: at 6.82:1 it hits the width
     limit long before the 44px height limit, while every sibling is height-limited and
     lands 27-73px inside. Measured side padding before: Rentvine 1/1 against
     appfolio 70/70, propertyware 73/73, buildium 57/57. A percentage cap restores the
     original inset AND keeps it proportional at every width. */
  max-width: 76%;      /* 250px chip -> 190px, the original desktop cap */
  max-height: 44px;
}
@media (max-width: 767px) {
  .int-chip img { max-width: 82%; max-height: 29px; }
}