/* ============================================================
   SUPER BDM — page-specific styles. Tokens first; raw values
   only where Figma defines fills/geometry outside the token set
   (same convention as pages/home/page.css).
   Desktop values from Figma 8126:370; mobile from 8805:2.
   ============================================================ */

/* ---------- SECTION RHYTHM ----------
   Desktop seams measured from Figma (icon-top minus previous
   section bottom = 86–91). FAQ→banner & banner→footer normalized
   to the 90 canon per REBUILD ADDENDUM §5 (frame still draws
   148/150 — logged in FIGMA-ISSUES.md). */
@media (min-width: 768px) {
  #trust { margin-top: 104px; }
  #meet-super-bdm { margin-top: 86px; }
  #product-video { margin-top: var(--bh-space-150); }
  #superpower-01, #superpower-02, #superpower-03 { margin-top: 86px; }
  #product-tour { margin-top: 86px; }
  #full-platform { margin-top: 86px; }
  #included { margin-top: 88px; }
  #add-ons { margin-top: 90px; }
  #run-it-your-way { margin-top: 90px; }
  #integrations { margin-top: 86px; }
  #security { margin-top: 86px; }
  #testimonials { margin-top: 90px; }
  #faq { margin-top: 90px; }
  #book-a-demo { margin-top: 90px; padding-bottom: 90px; }
}
@media (max-width: 767px) {
  #trust, #meet-super-bdm, #product-video, #superpower-01, #superpower-02,
  #superpower-03, #product-tour, #full-platform, #included, #add-ons,
  #run-it-your-way, #integrations, #security, #testimonials, #faq,
  #book-a-demo { margin-top: var(--bh-m-section-rhythm); }
  #book-a-demo { padding-bottom: var(--bh-m-section-rhythm); }
}

/* ---------- Announcement bar (chrome, same as home) ---------- */
.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 (chrome, same as home) ---------- */
.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 (chrome, same as home) ---------- */
.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); }
/* Page-wide accordion glyph: "+" closed / "−" open (Figma 30px circle) */
.bh-acc-glyph { width: 30px; height: 30px; font-size: 18px; }
.bh-acc-item.is-open .bh-acc-glyph { transform: none; }
.bh-acc-glyph i { font-style: normal; }
.bh-acc-glyph .acc-minus { display: none; }
.bh-acc-item.is-open .acc-plus { display: none; }
.bh-acc-item.is-open .acc-minus { display: inline; }

/* ============ HERO ============ */
.hero { position: relative; }
.hero-inner { position: relative; padding-top: 31px; }
.hero-copy { max-width: 620px; position: relative; z-index: 1; }
.hero-eyebrow { display: block; }
.hero-h1 { margin-top: var(--bh-space-48); line-height: 96px; letter-spacing: -2.8px; }
.hero-hl { padding: 0 16px; transform: none; border-radius: var(--bh-r-12); background: var(--bh-green); }
.hero-sub { font-size: 22px; font-weight: var(--bh-w-medium); margin-top: 29px; }
.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 { height: 56px; min-width: 186px; font-size: 17.5px; }

.hero-clay {
  position: absolute; top: 56px; right: 24px;
  /* was 660x680 with object-fit: cover — the art is 1.345:1, so cover scaled it to
     939x680 and threw away 139px from EACH side: the easel, the coin stacks and the
     end of the LEAD arc. contain + a box on the art's own ratio shows all of it. */
  width: 700px; height: auto; object-fit: contain;
}
@media (max-width: 1279px) {
  .hero-clay { width: 46vw; height: auto; right: var(--bh-space-20); top: 40px; }
}
@media (max-width: 1023px) {
  .hero-inner { padding-top: var(--bh-space-40); display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hero-copy { max-width: 100%; display: flex; flex-direction: column; align-items: center; }
  .hero-clay { position: static; width: min(342px, 100%); height: auto; order: 3; margin-top: var(--bh-space-40); }
}
@media (max-width: 767px) {
  .hero-eyebrow { font-size: 11px; letter-spacing: var(--bh-m-ls-eyebrow); }
  .hero-h1 { margin-top: var(--bh-space-16); line-height: 1.18; letter-spacing: -1.2px; }
  .hero-hl { padding: 0 10px; border-radius: 8px; }
  .hero-sub { font-size: var(--bh-m-fs-lead); margin-top: var(--bh-space-20); }
  /* clay sits between sub and chips on mobile */
  .hero-clay { order: 0; margin-top: var(--bh-space-40); }
  .hero-copy { display: contents; }
  .hero-eyebrow { order: -3; }
  .hero-h1 { order: -2; }
  .hero-sub { order: -1; }
  .hero-chips { order: 1; justify-content: center; gap: var(--bh-space-8); margin-top: var(--bh-space-16); max-width: 342px; }
  .hero-chip { height: 32px; padding: 0 11px; border-radius: var(--bh-r-12); font-size: 12.5px; font-weight: var(--bh-w-bold); }
  .hero-cta-row { order: 2; flex-direction: column; gap: var(--bh-space-16); margin-top: var(--bh-space-40); }
  .hero-cta { height: 53px; min-width: 152px; font-size: 16px; }
  .hero-cta-arrow { display: none; }

}

/* ============ TRUST STRIP ============ */
.trust-title {
  text-align: center;
  font-size: 13px; font-weight: var(--bh-w-xbold); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--bh-body);
}
.trust-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--bh-space-16);
  max-width: 1256px; margin: 30px 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-title { font-size: 11.5px; letter-spacing: 1.2px; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: var(--bh-space-30); }
  .trust-chip { height: 62px; border-radius: var(--bh-r-8); border-color: #edf0f5; box-shadow: none; }
  .trust-chip img { max-width: 82px; max-height: 36px; }
}

/* ============ MEET SUPER BDM ============ */
.meet .bh-section-header { gap: 0; }
.meet .bh-eyebrow { margin-top: var(--bh-space-16); }
.meet .bh-h2 { margin-top: 18px; }
.meet-line2 { display: block; }
.meet-body { max-width: 760px; font-size: 20px; line-height: 33px; margin-top: var(--bh-space-32); }
.meet-body-2 { margin-top: 0; }
@media (max-width: 767px) {
  .meet-line2 { display: inline; } /* mobile Figma flows the green phrase in-line */
  .meet-body { font-size: 16px; line-height: 1.55; margin-top: var(--bh-space-24); }
  .meet-body-2 { margin-top: var(--bh-space-12); }
}

/* ============ PRODUCT VIDEO ============ */
.video-card {
  position: relative; overflow: hidden; border-radius: var(--bh-r-16);
  background: var(--bh-dark); min-height: 560px;
  box-shadow: var(--bh-shadow-card);   /* was lift - 102px reach on a 342x250 mobile card */
  display: flex; align-items: center; justify-content: center;
}
.video-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bh-accent); color: var(--bh-white);
  box-shadow: var(--bh-shadow-card);
  margin-bottom: 64px;
}
.video-play svg { margin-left: 4px; }
.video-label {
  position: absolute; z-index: 1; left: 0; right: 0; top: 310px;
  text-align: center;
  font-size: var(--bh-fs-eyebrow); font-weight: var(--bh-w-xbold);
  letter-spacing: var(--bh-ls-eyebrow); color: var(--bh-white);
}
@media (max-width: 767px) {
  .video-card { min-height: 250px; border-radius: var(--bh-r-16); }
  .video-play { width: 66px; height: 66px; margin-bottom: 40px; }
  .video-label { top: auto; bottom: 62px; font-size: 13px; letter-spacing: 1.5px; }
}

/* ============ SUPERPOWERS ============ */
.sp-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text ." "acc art" "training art"; /* art spans accordion + training (review E2) */
  column-gap: 100px; row-gap: 26px;
  align-items: start;
}
.sp--flip .sp-inner { grid-template-areas: ". text" "art acc" "art training"; }
.sp-text { grid-area: text; max-width: 620px; }
.sp-accordion { grid-area: acc; }
.sp-art { grid-area: art; }
.sp-training { grid-area: training; }
.sp-text .bh-eyebrow { display: block; margin-top: var(--bh-space-16); }
.sp-h2 { font-size: 46px; letter-spacing: -1.5px; line-height: 56px; margin-top: 10px; }
.sp-desc { max-width: 540px; font-size: 17px; line-height: 28px; margin-top: var(--bh-space-16); }
.sp-acc-item + .sp-acc-item { margin-top: 10px; }
.sp-acc-item { box-shadow: var(--bh-shadow-card); }   /* matches super-broker / super-pm */
.sp-acc-toggle { padding: var(--bh-space-16) 28px; font-size: 17px; }
/* closed glyph has no circle — matches Super PM / Super Broker */
.sp-accordion .bh-acc-glyph { background: transparent; color: var(--bh-body); }
.sp-accordion .bh-acc-item.is-open .bh-acc-glyph { background: var(--bh-accent); color: var(--bh-white); }
.sp-acc-item.is-open .sp-acc-toggle { padding-top: var(--bh-space-20); font-size: 18px; }
.sp-accordion .bh-acc-body > p { padding: 0 28px var(--bh-space-20); font-size: 15px; line-height: 24px; }
.sp-training {
  background: #EAF6F2; border-radius: var(--bh-r-16);
  padding: 18px 28px; margin-top: 10px;
}
.sp-training-label {
  font-size: 12px; font-weight: var(--bh-w-xbold); letter-spacing: 1.2px;
  color: var(--bh-accent);
}
.sp-training-body { font-size: 14.5px; font-weight: var(--bh-w-semibold); line-height: 22px; color: var(--bh-body); margin-top: 6px; }
.sp-art {
  align-self: stretch;                 /* top and bottom track the accordion (review E2) */
  display: flex; align-items: center; justify-content: center;
  background: var(--bh-bg-grey-ui); border-radius: var(--bh-r-20);
  padding: var(--bh-space-32);
  box-shadow: var(--bh-shadow-lift);
}
.sp-art { position: relative; min-height: 0; }
.sp-art 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;
  border-radius: var(--bh-r-16); box-shadow: var(--bh-shadow-card);
}
@media (max-width: 1023px) {
  /* stacked layout: the art returns to normal flow (review E2) */
  .sp-art { position: static; }
  .sp-art img { position: static; inset: auto; width: 100%; height: auto; object-fit: cover; }
  .sp-inner, .sp--flip .sp-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "art" "acc" "training";
    row-gap: 0;
  }
  .sp-text { max-width: 100%; }
  .sp-icon { width: 34px; height: 34px; }
  .sp-text .bh-eyebrow { font-size: 12px; letter-spacing: 1.2px; }
  .sp-h2 { font-size: var(--bh-m-fs-h2); letter-spacing: -0.5px; line-height: 1.2; margin-top: var(--bh-space-8); }
  .sp-desc { font-size: 16px; line-height: 1.5; margin-top: var(--bh-space-12); }
  /* the mobile "panel": art + accordion merge into one white card */
  .sp-art {
    margin-top: var(--bh-space-24);
    background: var(--bh-white); border-radius: var(--bh-r-20) var(--bh-r-20) 0 0;
    padding: var(--bh-space-20) var(--bh-space-20) 0;
    box-shadow: var(--bh-shadow-btn-sm);
  }
  .sp-art img { border-radius: var(--bh-r-12); box-shadow: none; }
  .sp-accordion {
    background: var(--bh-white); border-radius: 0 0 var(--bh-r-20) var(--bh-r-20);
    padding: var(--bh-space-8) var(--bh-space-20) var(--bh-space-20);
    box-shadow: var(--bh-shadow-btn-sm);
  }
  .sp-acc-item, .sp-acc-item + .sp-acc-item { margin-top: 0; }
  .sp-acc-item { border: none; border-radius: 0; box-shadow: none; }
  .sp-acc-item + .sp-acc-item { border-top: 1px solid #E5E8ED; }
  .sp-acc-item.is-open { border-color: #E5E8ED; }
  .sp-acc-toggle, .sp-acc-item.is-open .sp-acc-toggle { padding: var(--bh-space-16) 0; font-size: 18px; }
  .sp-acc-item.is-open .sp-acc-toggle { font-size: 19px; color: var(--bh-accent); }
  .sp-accordion .bh-acc-body > p { padding: 0 0 var(--bh-space-16); font-size: 16px; }
  .sp-acc-glyph { width: 26px; height: 26px; font-size: 16px; }
  .sp-training {
    margin: var(--bh-space-24) calc(-1 * var(--bh-space-20)) 0;
    border-radius: var(--bh-r-12); padding: 14px 18px;
  }
  .sp-training-label { font-size: 11px; }
}

/* ============ PRODUCT TOUR ============ */
.tour .bh-section-header { gap: var(--bh-space-16); }
.tour-screen {
  width: min(1140px, 100%); margin: var(--bh-space-32) auto 0;
  background: var(--bh-white); border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-12); overflow: hidden;
  box-shadow: var(--bh-shadow-card);   /* was lift - super-crm / super-pm / super-broker all use the card token here */
}
.tour-bar {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 44px; background: #F7F8FB;
}
.tour-dots { position: absolute; left: 16px; top: 17px; display: flex; gap: 6px; }
.tour-dot { width: 10px; height: 10px; border-radius: 50%; display: block; }
.tour-dot--r { background: #FA7370; }
.tour-dot--y { background: #FCC24A; }
.tour-dot--g { background: #59CC6B; }
.tour-url {
  display: inline-flex; align-items: center; justify-content: center;
  width: 260px; height: 24px;
  background: var(--bh-white); border: 1px solid var(--bh-border); border-radius: var(--bh-r-8);
  font-size: 11.5px; font-weight: var(--bh-w-semibold); color: var(--bh-body);
}
.tour-body { display: grid; grid-template-columns: 200px 1fr 318px; grid-template-rows: auto 1fr; min-height: 496px; }
.tour-side { grid-row: 1 / 3; background: #F7F8FB; padding: 24px 14px; display: flex; flex-direction: column; gap: 14px; }
.tour-main { grid-column: 2; grid-row: 1; }
.tour-lead { grid-column: 3; grid-row: 1 / 3; }
.tour-note { grid-column: 2; grid-row: 2; align-self: start; padding-left: 32px; }
.tour-side-item {
  display: flex; align-items: center; gap: var(--bh-space-12);
  height: 38px; padding: 0 14px; border-radius: 10px;
  font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); color: var(--bh-body);
}
.tour-side-item.is-active { background: #EAF6F2; 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 { padding: 32px 0 0 32px; }
.tour-title { font-size: 19px; font-weight: var(--bh-w-bold); color: var(--bh-ink); }
.tour-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: 560px; max-width: 100%; height: 54px; padding: 0 18px;
  background: var(--bh-white); border: 1px solid var(--bh-border); border-radius: var(--bh-r-12);
  margin-top: var(--bh-space-12);
}
.tour-row:first-of-type { margin-top: var(--bh-space-20); }
.tour-row-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bh-accent); flex: 0 0 auto; }
.tour-row-dot--amber { background: #F5B840; }
.tour-row-text { font-size: 13.5px; font-weight: var(--bh-w-semibold); color: var(--bh-ink); flex: 1 1 auto; }
.tour-row-meta--m { display: none; }
.tour-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 14px; border-radius: var(--bh-r-8);
  background: #EAF6F2; color: var(--bh-accent);
  font-size: 11.5px; font-weight: var(--bh-w-bold);
  white-space: nowrap; flex: 0 0 auto;
}
.tour-pill--amber { background: #FEF4E0; color: #F5B840; }
.tour-note { font-size: 12px; color: var(--bh-body); margin-top: var(--bh-space-24); }
.tour-score-block { display: none; }
.tour-lead {
  width: 286px; margin: 32px 32px 0 auto;
  background: #F7F8FB; border-radius: var(--bh-r-12);
  padding: var(--bh-space-24); height: 330px;
}
.tour-lead-head { display: flex; align-items: center; gap: var(--bh-space-12); }
.tour-lead-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #EAF6F2; color: var(--bh-accent);
  font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-xbold);
}
.tour-lead-name { display: block; font-size: 15px; font-weight: var(--bh-w-bold); color: var(--bh-ink); }
.tour-lead-meta { display: block; font-size: 11.5px; color: var(--bh-body); }
.tour-score-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: var(--bh-space-24); }
.tour-score-label { font-size: 10.5px; font-weight: var(--bh-w-xbold); letter-spacing: 1px; color: var(--bh-body); }
.tour-score { font-size: 24px; font-weight: var(--bh-w-bold); color: var(--bh-accent); line-height: 1; }
.tour-track { height: 8px; border-radius: var(--bh-r-8); background: var(--bh-border); margin-top: 10px; overflow: hidden; }
.tour-track-fill { display: block; width: 82%; height: 100%; border-radius: inherit; background: var(--bh-accent); }
.tour-lead-desc { font-size: 12px; line-height: 19px; margin-top: var(--bh-space-12); }
.tour-lead-btn {
  display: flex; align-items: center; justify-content: center;
  height: 46px; border-radius: var(--bh-r-12);
  background: var(--bh-accent); color: var(--bh-white);
  font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-bold);
  margin-top: var(--bh-space-32);
}
.tour-labels {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--bh-space-30);
  max-width: 1080px; margin: 34px auto 0;
}
.tour-label {
  display: flex; align-items: center; justify-content: center;
  height: 64px;
  background: var(--bh-white); border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-12);
  font-size: 16.5px; font-weight: var(--bh-w-bold); color: var(--bh-ink);
}
/* mobile tour: tab strip inside the mockup, stacked body, no label strips */
.tour-tabs { display: none; }
@media (max-width: 1023px) {
  .tour-screen { border-radius: var(--bh-r-20); margin-top: var(--bh-space-24); }
  .tour-bar { height: 56px; }
  .tour-body { display: block; min-height: 0; background: #F5F7FA; }
  .tour-side { flex-direction: row; background: var(--bh-white); padding: 12px 14px 16px; gap: var(--bh-space-8); overflow-x: auto; }
  .tour-side-item { height: 32px; padding: 0 13px; border-radius: 9px; background: #F5F7FA; font-size: 12.5px; flex: 0 0 auto; }
  .tour-side-item.is-active { background: var(--bh-accent); color: var(--bh-white); }
  .tour-side-dot { display: none; }
  .tour-main { padding: var(--bh-space-16); }
  .tour-title { font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 18px; }
  .tour-row { width: 100%; height: auto; min-height: 60px; padding: 8px 12px; }
  .tour-row-name { display: block; font-size: 14px; font-weight: var(--bh-w-bold); }
  .tour-row-meta--d { display: none; }
  .tour-row-meta--m { display: block; font-size: 12px; font-weight: var(--bh-w-regular); color: var(--bh-body); }
  .tour-pill { height: 24px; padding: 0 9px; font-size: 11px; }
  .tour-note { margin: var(--bh-space-16); margin-top: 0; padding-left: 0; }
  .tour-lead {
    width: auto; height: auto; margin: 0 var(--bh-space-16) var(--bh-space-16);
    background: var(--bh-white); border: 1.5px solid var(--bh-accent);
    border-radius: 14px; padding: var(--bh-space-16);
  }
  .tour-lead-avatar { border-radius: 10px; width: 38px; height: 38px; background: var(--bh-accent); color: var(--bh-white); }
  .tour-score-block { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin-left: auto; }
  .tour-score-block .tour-score-label { white-space: nowrap; }
  .tour-score-row, .tour-track, .tour-lead-desc { display: none; }
  .tour-lead-btn { margin-top: var(--bh-space-20); height: 42px; border-radius: 10px; }
  .tour-labels { display: none; }
}

/* ============ FULL PLATFORM ============ */
.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: 1px solid var(--bh-border);
  border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);   /* was lift - super-crm / super-pm / super-broker all use the card token here */
  min-height: 192px; padding: 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.platform-icon { width: 52px; height: 52px; 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) {
  .platform-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-30); }
  .platform-card { min-height: 176px; padding: var(--bh-space-24); }
}

/* ============ TOOLS (Included + Add-ons) ============ */
.tools-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;
}
.addons .tools-grid { margin-top: var(--bh-space-48); }
.tool-card {
  background: var(--bh-white); border: 1px solid #ECEEF3;
  border-radius: var(--bh-r-16); overflow: hidden;
  box-shadow: var(--bh-shadow-card);   /* was lift - super-crm / super-pm / super-broker all use the card token here */
  display: flex; flex-direction: column;
}
.tool-img { width: 100%; height: 270px; object-fit: cover; }
.tool-content { padding: var(--bh-space-24) var(--bh-space-32) var(--bh-space-40); display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; }
.tool-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 12px; border-radius: var(--bh-r-8);
  font-size: 11px; font-weight: var(--bh-w-xbold); letter-spacing: 0.5px;
}
.tool-pill--included { background: var(--bh-white); border: 1.5px solid var(--bh-accent); color: var(--bh-accent); }
.tool-pill--addon { background: var(--bh-accent); color: var(--bh-white); }
.tool-title { font-size: 27px; letter-spacing: -0.5px; margin-top: var(--bh-space-8); }
.tool-desc { font-size: 16px; margin-top: var(--bh-space-8); }
.tool-bullets { margin-top: var(--bh-space-20); display: flex; flex-direction: column; gap: 11px; }
.tool-bullets li { display: flex; align-items: flex-start; gap: var(--bh-space-16); font-size: 16px; color: var(--bh-ink); }
.tool-check {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: var(--bh-accent); color: var(--bh-white);
  font-size: 12px; font-weight: var(--bh-w-bold);
}
.tool-cta {
  margin-top: var(--bh-space-24);
  background: var(--bh-accent); color: var(--bh-white);
  height: 51px; padding-inline: var(--bh-space-32); font-size: 16px;
}
@media (max-width: 1023px) {
  .tools-sub { font-size: 16px; line-height: 1.5; }
  .tools-grid, .addons .tools-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-24); }
  .tool-img { height: 147px; }
  .tool-content { padding: var(--bh-space-24) var(--bh-space-16) var(--bh-space-30); }
  .tool-title { font-size: 22px; }
  .tool-bullets li { font-size: 16px; gap: var(--bh-space-12); }
  .tool-cta { height: 48px; padding-inline: var(--bh-space-24); 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);
  min-height: 456px; padding: var(--bh-space-32) 42px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.runit-label { font-size: var(--bh-fs-eyebrow); font-weight: var(--bh-w-xbold); letter-spacing: 1.5px; color: var(--bh-body); }
.runit-label--ai { color: var(--bh-accent); }
.runit-title { font-size: 36px; letter-spacing: -1px; margin-top: 10px; }
.runit-list { margin-top: 46px; display: flex; flex-direction: column; gap: var(--bh-space-30); }
.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-check {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bh-accent); color: var(--bh-white);
  font-size: 13px; font-weight: var(--bh-w-bold);
}
.runit-check--grey { background: #E5E8F0; color: var(--bh-body); }
.runit-btn {
  margin-top: auto;
  background: var(--bh-accent); color: var(--bh-white);
  height: 56px; min-width: 190px; font-size: 16.5px;
}
.runit-note { text-align: center; font-size: 15.5px; font-weight: var(--bh-w-semibold); margin-top: 42px; }
@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-24); }
  .runit-card { border-radius: var(--bh-r-20); padding: 10px; }
  .runit-inner { border-radius: var(--bh-r-12); min-height: 0; padding: var(--bh-space-24) var(--bh-space-24) var(--bh-space-24); }
  .runit-title { font-size: 22px; letter-spacing: -0.5px; margin-top: var(--bh-space-8); }
  .runit-label { font-size: 11px; letter-spacing: 1px; }
  .runit-list { margin-top: var(--bh-space-24); gap: var(--bh-space-20); }
  .runit-list li { font-size: 16px; font-weight: var(--bh-w-regular); align-items: flex-start; }
  .runit-check { width: 22px; height: 22px; font-size: 12px; }
  .runit-btn { margin-top: var(--bh-space-24); width: 100%; height: 46px; font-size: 15px; }
  .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-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 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: 152px; max-height: 44px; width: auto; height: auto; object-fit: cover; }
@media (max-width: 1023px) {
  .int-body { font-size: 16px; line-height: 1.5; }
  .int-grid { grid-template-columns: 1fr 1fr; gap: var(--bh-space-12); margin-top: var(--bh-space-30); }
  .int-chip { height: 73px; border-radius: var(--bh-r-8); border-width: 1px; }
  .int-chip img { max-width: 100px; max-height: 30px; }
}

/* ============ SECURITY ============ */
.security-sub { font-size: 20px; }
.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: 1px solid var(--bh-border);
  border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);   /* was lift - super-crm / super-pm / super-broker all use the card token here */
  min-height: 360px; padding: var(--bh-space-36) var(--bh-space-32);
}
.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: var(--bh-space-30); }
.security-desc { font-size: 16px; line-height: 1.5; margin-top: var(--bh-space-12); }
@media (max-width: 1023px) {
  .security-sub { font-size: 16px; }
  .security-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-24); }
  .security-card { min-height: 0; padding: var(--bh-space-30) var(--bh-space-24) var(--bh-space-36); }
}

/* ============ TESTIMONIALS ============ */
.testi-carousel { position: relative; margin-top: var(--bh-space-32); }
.testi-slide { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: var(--bh-space-30); }
.testi-quote {
  font-family: var(--bh-font-display); font-weight: var(--bh-w-semibold);
  font-size: 36px; line-height: 50px; color: var(--bh-ink); max-width: 940px;
}
.testi-caption { display: flex; flex-direction: column; align-items: center; margin-top: var(--bh-space-36); }
.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: 26%; 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: var(--bh-space-20); background: var(--bh-white); border: 1.5px solid var(--bh-border); color: var(--bh-ink); }
.testi-arrow--next { right: var(--bh-space-20); background: var(--bh-accent); color: var(--bh-white); }
.testi-arrow .arrow-glyph-mobile { display: none; }
.testi-nav-row { display: contents; }
@media (max-width: 767px) {
  .testi-carousel { margin-top: var(--bh-space-24); 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 { width: min(1000px, 100%); margin: 42px auto 0; }
.faq-list .bh-acc-item { box-shadow: var(--bh-shadow-card); }  /* was btn-sm - every other page uses the card token */
.faq-list .bh-acc-toggle { padding: var(--bh-space-20) var(--bh-space-30); font-size: 17px; }
.faq-list .bh-acc-body > p { padding: 0 var(--bh-space-30) var(--bh-space-24); font-size: 15.5px; }
.faq-list .bh-acc-item + .bh-acc-item { margin-top: 14px; }
@media (max-width: 767px) {
  .faq-list { margin-top: var(--bh-space-24); }
  .faq-list .bh-acc-toggle { padding: var(--bh-space-16) var(--bh-space-20); font-size: 16px; }
  .faq-list .bh-acc-body > p { padding: 0 var(--bh-space-20) var(--bh-space-20); font-size: 15px; }
  .faq-list .bh-acc-item + .bh-acc-item { margin-top: var(--bh-space-16); }
  .faq-list .bh-acc-glyph { width: 26px; height: 26px; font-size: 16px; }
}

/* ============ CTA BANNER (green Banner v2) ============ */
.cta-banner {
  position: relative; overflow: hidden; border-radius: var(--bh-r-16);
  min-height: 560px;
  background: linear-gradient(90deg, #053A2D 0%, #0A6952 50%, var(--bh-green) 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: -1.5px; line-height: 1.08; color: var(--bh-white); max-width: 620px; }
.cta-break { display: inline; }
.cta-body { font-size: 20px; line-height: 1.45; color: var(--bh-white); max-width: 520px; margin-top: var(--bh-space-30); }
.cta-btn { background: var(--bh-white); color: var(--bh-accent); margin-top: var(--bh-space-30); min-width: 169px; height: 60px; font-size: 18px; }
.cta-photo { position: absolute; right: 0; top: 0; height: 100%; width: auto; object-fit: cover; object-position: bottom right; }
@media (max-width: 1023px) {
  .cta-banner {
    min-height: 400px; border-radius: var(--bh-r-16);
    background: linear-gradient(131.2deg, #053A2D 0%, #0A6952 50%, var(--bh-green) 100%);
    align-items: flex-start;
  }
  .cta-copy { padding: var(--bh-space-40) var(--bh-space-24); }
  .cta-h { font-size: 30px; letter-spacing: -0.5px; line-height: 1.08; }
  .cta-h br.cta-break { display: block; }
  .cta-body { font-size: 16px; margin-top: var(--bh-space-16); }
  .cta-btn { margin-top: var(--bh-space-20); min-width: 143px; height: 46px; font-size: 15px; }
  .cta-photo { top: auto; bottom: 0; height: 218px; width: 215px; }
}

/* ---------- Footer page-level tweaks (chrome, same as home) ---------- */
.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; }
}

/* keep Co-Pilot unbroken */
.nb { white-space: nowrap; }

/* Part E.9 — with JS off, accordion bodies must be readable (base sets max-height:0) */
html:not(.js) .bh-acc-body { max-height: none; }

/* ---------- 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; }
}

/* === 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; }
}

/* === 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: 1023px) {
  /* T15/T16/A15 - the negative inline margin bled the box to 382px at x=4, wider
     than the card above it and past the 24px page margin. The rule it overrides
     lives in @media (max-width: 1023px), so scoping this to 767 left the box still
     protruding 20px at 768 and 1023 - the regression sweep caught that. */
  .sp-training { margin: var(--bh-space-24) 0 0; }
  /* T14 - .sp-art and .sp-accordion are two elements faking one card, and BOTH
     cast a downward shadow. sp-art's shadow lands on the accordion and reads as a
     line across the middle of the card. One border, no shadows - which is exactly
     how Super PM and Super Broker build the same panel. */
  .sp-art {
    box-shadow: none;
    border: 1px solid #e5e8ed;
    border-bottom: none;
    padding: var(--bh-space-20) var(--bh-space-20) 0;
  }
  .sp-art img { display: block; }
  .sp-accordion {
    box-shadow: none;
    border: 1px solid #e5e8ed;
    border-top: none;
  }
}

/* === 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);
  }
}