/* ============================================================
   SUPER BROKER — page-specific styles. Tokens first.
   Desktop values match Figma 8274:3446; mobile 8929:4009.
   Chrome blocks (announce bar, dropdown internals, drill-ins,
   footer tweaks) are copied from pages/home/page.css verbatim.
   ============================================================ */

/* ---------- SECTION RHYTHM ----------
   Desktop seams measured from Figma 8274:3446. Mobile sections carry
   a 40px top pad each (Figma mobile frames = 80 total between blocks). */
@media (min-width: 768px) {
  #trusted-by { margin-top: 104px; }
  #meet { margin-top: 86px; }
  #superpower-01 { margin-top: 88px; }
  #superpower-02 { margin-top: 80px; }
  #product-tour { margin-top: 80px; }
  #run-it { margin-top: 88px; }
  #advisory { margin-top: 88px; }
  #integrations { margin-top: 88px; }
  #security { margin-top: 100px; }
  #testimonials { margin-top: 90px; }
  #faq { margin-top: 90px; }
  #book-a-demo { margin-top: 90px; padding-bottom: 90px; }
}
@media (max-width: 767px) {
  #trusted-by, #meet, #superpower-01, #superpower-02, #product-tour,
  #run-it, #advisory, #integrations, #security, #testimonials, #faq,
  #book-a-demo { margin-top: var(--bh-m-section-rhythm); }
  #book-a-demo { padding-bottom: var(--bh-space-40); }
}

/* ---------- Announcement bar (verbatim from 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 (verbatim from 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); }

/* Featured cards (verbatim from home) */
.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 (verbatim from 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; }

/* ---------- Mobile menu / drill headers (verbatim from home) ---------- */
.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");
}

/* ============================================================
   PAGE SECTIONS
   ============================================================ */

.accent-text { color: var(--bh-accent); }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: 31px; }
/* 620 forced "More Revenue." to wrap at 94px; Figma sets that line 628 wide (8307:2738).
   The sub keeps its own 500px measure, so only the headline gains the room. */
.hero-copy { max-width: 700px; }
.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: 94px; letter-spacing: -2.8px; line-height: var(--bh-lh-tight);
}
.hero-hl {
  display: inline-block; position: relative;
  color: var(--bh-white);
  background: var(--bh-accent);
  border-radius: var(--bh-r-12);
  padding: 0 0.18em 0.03em 0.17em;
  margin-left: -0.17em;
}
.hero-sub { font-size: 21px; font-weight: var(--bh-w-medium); max-width: 500px; margin-top: var(--bh-space-30); }
.hero-chips { display: flex; gap: var(--bh-space-16); margin-top: var(--bh-space-60); }
.hero-chip {
  display: inline-flex; align-items: center; gap: var(--bh-space-8);
  height: 40px; padding: 0 var(--bh-space-20) 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 {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bh-accent); color: var(--bh-white);
  font-size: 9px; font-weight: var(--bh-w-xbold);
}
.hero-cta-row { display: flex; align-items: center; gap: var(--bh-space-24); margin-top: 44px; }
.hero-cta { min-width: 186px; height: 58px; font-size: 17.5px; }

.hero-clay--desktop {
  position: absolute; top: -19px; right: calc(50% - 680px);
  width: 660px; height: 680px; object-fit: contain;
}
.hero-clay--mobile { display: none; }
@media (min-width: 768px) { .hero { min-height: 661px; } }
@media (min-width: 768px) and (max-width: 1359px) {
  .hero-clay--desktop { right: 0; width: 46vw; max-width: 660px; height: auto; }
}
@media (max-width: 767px) {
  .hero { padding-top: var(--bh-space-40); }
  .hero-copy { max-width: none; text-align: center; }
  .hero-eyebrow { font-size: var(--bh-m-fs-eyebrow); letter-spacing: var(--bh-m-ls-eyebrow); }
  .hero-h1 { margin-top: var(--bh-space-16); font-size: 36px; letter-spacing: -1.2px; line-height: 1.1; }
  .hero-hl { border-radius: var(--bh-r-8); margin-left: 0; }
  .hero-sub { font-size: 16.5px; max-width: none; margin-top: var(--bh-space-16); }
  .hero-clay--desktop { display: none; }
  .hero-clay--mobile {
    display: block; height: 300px; width: auto; max-width: 100%;
    margin: var(--bh-space-16) auto 0; object-fit: contain;
  }
  .hero-chips { flex-wrap: wrap; justify-content: center; gap: var(--bh-space-8); margin-top: var(--bh-space-16); }
  .hero-chip {
    height: 32px; padding: 0 14px 0 10px; border-radius: 10px;
    background: rgba(255,255,255,0.7);
    font-size: 12.5px; font-weight: var(--bh-w-bold);
  }
  .hero-cta-row { flex-direction: column; gap: var(--bh-space-16); margin-top: var(--bh-space-16); }
  .hero-cta { min-width: 165px; height: 53px; font-size: 16px; }
  .hero-cta-arrow { display: none; } /* mobile Figma CTA has no arrow */

}

/* ---------- Trusted-by strip ---------- */
.trusted-label {
  text-align: center;
  font-size: var(--bh-fs-fine); font-weight: var(--bh-w-xbold);
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--bh-body);
}
.trusted-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--bh-space-16);
  margin-top: var(--bh-space-30);
}
.trusted-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);
}
.trusted-chip img { max-width: 140px; max-height: 52px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 767px) {
  .trusted-label { font-size: 11.5px; letter-spacing: 1px; color: #999EAB; }
  .trusted-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: var(--bh-space-16); }
  .trusted-chip { height: 62px; border-radius: 10px; border-color: #EDF0F5; box-shadow: none; }
  .trusted-chip img { max-width: 79px; max-height: 30px; }
}

/* ---------- Meet Super Broker + video ---------- */
.meet-h2 { line-height: 1.07; }
.meet-body { max-width: 760px; font-size: 20px; line-height: 33px; }
.meet-body p + p { margin-top: 0; }
.video-card {
  position: relative; overflow: hidden; border-radius: var(--bh-r-16);
  background: var(--bh-dark); margin-top: var(--bh-space-80);
  height: 560px; box-shadow: var(--bh-shadow-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--bh-space-32);
}
.video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-glow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
  width: 600px; height: 300px; border-radius: 50%;
  background: rgba(10,5,18,0.55); filter: blur(80px);
}
.video-play {
  position: relative; z-index: 1; margin-top: -36px;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bh-accent);
  box-shadow: 0 0 28px rgba(59,130,246,0.55);
  display: inline-flex; align-items: center; justify-content: center;
}
.video-play-tri {
  display: block; width: 0; height: 0; margin-left: 5px;
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--bh-white);
}
.video-label {
  position: relative; z-index: 1;
  font-size: 14.5px; font-weight: var(--bh-w-xbold); letter-spacing: 2px;
  text-transform: uppercase; color: var(--bh-white-85); text-align: center;
}
@media (max-width: 767px) {
  .meet-body { font-size: 16px; line-height: 1.5; }
  .meet-body p + p { margin-top: var(--bh-space-16); }
  .video-card { margin-top: var(--bh-space-40); height: 250px; gap: var(--bh-space-12); }
  .video-glow { width: 320px; height: 170px; }
  .video-play {
    margin-top: 0; width: 66px; height: 66px;
    background: var(--bh-white); box-shadow: var(--bh-shadow-card);
  }
  .video-play-tri { border-width: 10px 0 10px 17px; border-left-color: var(--bh-ink); }
  .video-label { font-size: 13px; letter-spacing: 1.5px; color: var(--bh-white); }
}

/* ---------- Superpowers ---------- */
.sp-icon { width: 48px; height: 48px; object-fit: contain; }
.sp-eyebrow {
  font-size: var(--bh-fs-eyebrow); font-weight: var(--bh-w-xbold);
  letter-spacing: 1px; text-transform: uppercase; color: var(--bh-accent);
  margin-top: var(--bh-space-16);
}
.sp-title {
  font-size: 46px; letter-spacing: -1px; line-height: var(--bh-lh-tight);
  margin-top: 14px;
}
.sp-desc { font-size: 17px; line-height: 1.5; max-width: 540px; margin-top: var(--bh-space-24); }
.sp-imgcard {
  background: var(--bh-bg-grey-ui); border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card); padding: var(--bh-space-32);
}
.sp-imgcard img { width: 100%; height: auto; border-radius: var(--bh-r-12); }
/* Superpower accordion — cards, no border (per Figma) */
.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 28px; font-size: 17px; line-height: 1.3; }
.sp-acc .bh-acc-item.is-open .bh-acc-toggle { padding-top: 18px; padding-bottom: 6px; font-size: 18px; color: var(--bh-accent); }
.sp-acc .bh-acc-body > p { padding: 0 var(--bh-space-30) var(--bh-space-24) 28px; }
.sp-acc .bh-acc-body p { font-size: 15px; line-height: 1.35; }
.sp-training {
  background: #EBF1FE; border-radius: var(--bh-r-16);
  padding: 18px 28px;
}
.sp-training-label {
  font-size: 12.5px; font-weight: var(--bh-w-xbold); letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--bh-accent);
}
.sp-training-desc { font-size: 15px; font-weight: var(--bh-w-semibold); line-height: 22px; margin-top: 6px; }
/* Accordion glyphs (page-scoped): + closed / − open, no rotation */
.sp-acc .bh-acc-glyph, .faq-list .bh-acc-glyph { width: 30px; height: 30px; font-size: 18px; background: transparent; }
.sp-acc .bh-acc-glyph::before, .faq-list .bh-acc-glyph::before { content: '+'; }
.sp-acc .bh-acc-item.is-open .bh-acc-glyph::before,
.faq-list .bh-acc-item.is-open .bh-acc-glyph::before { content: '−'; }
.sp-acc .bh-acc-item.is-open .bh-acc-glyph,
.faq-list .bh-acc-item.is-open .bh-acc-glyph { transform: none; }
.sp-acc .bh-acc-glyph { color: var(--bh-body); }
/* JS-off: accordions render open (Part E.9) */
html:not(.js) .sp-acc .bh-acc-body, html:not(.js) .faq-list .bh-acc-body { max-height: none; }

@media (min-width: 768px) {
  .sp-grid {
    display: grid;
    grid-template-columns: 580px 580px;
    grid-template-areas: "head ." "acc img" "training img"; /* spans accordion + training (review E2) */
    grid-template-rows: auto auto auto;
    column-gap: 80px; row-gap: var(--bh-space-24);
    align-items: start; align-content: start;
  }
  .sp-grid--flip { grid-template-areas: ". head" "img acc" "img training"; grid-template-columns: 580px 580px; }
  .sp-head { grid-area: head; }
  .sp-panel { display: contents; }
  .sp-imgcard { grid-area: img; align-self: stretch; display: flex; align-items: center; justify-content: center; }
  .sp-imgcard img { width: 100%; height: 100%; object-fit: cover; } /* matches Figma ref 10383:6934 (FILL) */
  .sp-acc { grid-area: acc; }
  .sp-training { grid-area: training; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .sp-grid, .sp-grid--flip { grid-template-columns: 1fr 1fr; column-gap: var(--bh-space-40); }
}
@media (max-width: 767px) {
  .sp-icon { width: 34px; height: 34px; }
  .sp-eyebrow { font-size: 12px; }
  .sp-title { font-size: var(--bh-m-fs-h2); letter-spacing: -0.5px; margin-top: var(--bh-space-16); }
  .sp-desc { font-size: 16px; margin-top: var(--bh-space-16); }
  .sp-panel {
    background: var(--bh-white); border: 1px solid #E5E8ED; border-radius: 18px;
    padding: var(--bh-space-20); margin-top: var(--bh-space-16);
  }
  .sp-imgcard { background: none; border-radius: 0; box-shadow: none; padding: 0; }
  .sp-imgcard img { border-radius: 14px; border: 1px solid #E5E8ED; }
  .sp-acc { margin-top: var(--bh-space-8); }
  .sp-acc .bh-acc-item { border: none; border-radius: 0; box-shadow: none; background: none; }
  .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: 18px; padding-bottom: 6px; font-size: 19px; }
  .sp-acc .bh-acc-body > p { padding: 0 var(--bh-space-36) var(--bh-space-16) 0; }
  .sp-acc .bh-acc-body p { font-size: 16px; line-height: 1.45; }
  .sp-acc .bh-acc-glyph, .faq-list .bh-acc-glyph { width: 26px; height: 26px; font-size: 16px; }
  .sp-training { margin-top: var(--bh-space-40); padding: 14px 18px; border-radius: var(--bh-r-12); }
  .sp-training-label { font-size: 11px; letter-spacing: 1px; }
  .sp-training-desc { font-size: 14.5px; line-height: 20px; }
}

/* ---------- Product tour ---------- */
.tour-screen {
  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-screen--desktop { width: min(1140px, 100%); margin: var(--bh-space-32) auto 0; }
.tour-screen--mobile { display: none; }
.tour-chrome {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 var(--bh-space-16);
  background: #F7F8FB;
}
.tour-dot { width: 10px; height: 10px; border-radius: 50%; }
.tour-dot--r { background: #FA7370; }
.tour-dot--y { background: #FCC24A; }
.tour-dot--g { background: #59CC6B; }
.tour-dot--b { background: var(--bh-accent); }
.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); border-radius: var(--bh-r-8);
  font-size: 11.5px; font-weight: var(--bh-w-semibold); color: var(--bh-body);
}
.tour-body { display: flex; align-items: stretch; height: 496px; }
.tour-side {
  flex: 0 0 200px; background: #F7F8FB;
  padding: var(--bh-space-24) 14px; display: flex; flex-direction: column; gap: 10px;
}
.tour-side-item {
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 var(--bh-space-16); border-radius: var(--bh-r-12);
  font-size: 14px; font-weight: var(--bh-w-semibold); color: var(--bh-body);
}
.tour-side-item.is-active { background: #EBF1FE; 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-date { font-size: 12.5px; color: var(--bh-body); margin-top: 4px; }
.tour-row {
  display: flex; align-items: center; gap: var(--bh-space-12);
  height: 54px; padding: 0 var(--bh-space-20) 0 18px; margin-top: var(--bh-space-12);
  background: var(--bh-white); border: 1px solid var(--bh-border); border-radius: var(--bh-r-12);
}
.tour-main .tour-row:first-of-type { margin-top: var(--bh-space-20); }
.tour-row-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--bh-accent); }
.tour-row-dot--amber { background: #F5B840; }
.tour-row-label { font-size: 13.5px; font-weight: var(--bh-w-semibold); color: var(--bh-ink); }
.tour-pill {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--bh-r-8);
  background: #EBF1FE; color: var(--bh-accent);
  font-size: 11.5px; font-weight: var(--bh-w-bold);
}
.tour-pill--amber { background: #FEF4E0; color: #F5B840; }
.tour-main-note { font-size: 12px; color: var(--bh-body); margin-top: 18px; }
.tour-lead {
  flex: 0 0 286px; margin: var(--bh-space-32) 30px 0 0; height: 330px;
  background: #F7F8FB; border-radius: var(--bh-r-12); padding: var(--bh-space-24);
}
.tour-lead-head { display: flex; align-items: center; gap: var(--bh-space-12); }
.tour-lead-avatar {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EBF1FE; color: var(--bh-accent);
  font-size: 16px; 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-sub { display: block; font-size: 11.5px; color: var(--bh-body); }
.tour-score-row { display: flex; align-items: baseline; 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-num { font-size: 24px; font-weight: var(--bh-w-bold); color: var(--bh-accent); }
.tour-score-track { display: block; height: 8px; border-radius: var(--bh-r-8); background: var(--bh-border); margin-top: 6px; overflow: hidden; }
.tour-score-fill { display: block; width: 82%; height: 100%; border-radius: inherit; background: var(--bh-accent); }
.tour-lead-desc { font-size: 12px; line-height: 19px; color: var(--bh-body); margin-top: var(--bh-space-16); }
.tour-lead-btn {
  display: flex; align-items: center; justify-content: center;
  height: 46px; margin-top: var(--bh-space-24); border-radius: var(--bh-r-12);
  background: var(--bh-accent); color: var(--bh-white);
  font-size: 14px; font-weight: var(--bh-w-bold);
}
.tour-labels {
  display: flex; justify-content: center; gap: var(--bh-space-30);
  margin-top: 34px;
}
.tour-label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 340px; 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);
}
@media (max-width: 767px) {
  .tour-screen--desktop, .tour-labels { display: none; }
  .tour-screen--mobile { display: block; margin-top: var(--bh-space-16); border-radius: var(--bh-r-20); border-color: #ECEEF3; }
  .tour-screen--mobile .tour-chrome { height: 52px; background: #F5F7FA; }
  .tour-screen--mobile .tour-url { width: 170px; height: 22px; font-size: 11.5px; }
  .tour-tabs {
    display: flex; align-items: center; gap: var(--bh-space-12);
    padding: 14px var(--bh-space-16); background: var(--bh-white);
    overflow: hidden; white-space: nowrap;
  }
  .tour-tab {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    padding: 7px 14px; border-radius: var(--bh-r-pill);
    background: var(--bh-bg-soft); color: var(--bh-body);
    font-size: 12.5px; font-weight: var(--bh-w-semibold);
  }
  .tour-tab.is-active { background: var(--bh-accent); color: var(--bh-white); font-weight: var(--bh-w-bold); }
  .tour-m-body { background: #F5F7FA; padding: var(--bh-space-16); }
  .tour-screen--mobile .tour-main-title { font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 18px; }
  .tour-m-row {
    display: flex; align-items: center; gap: 10px;
    min-height: 64px; padding: 10px 14px; margin-top: var(--bh-space-12);
    background: var(--bh-white); border: 1px solid var(--bh-border); border-radius: var(--bh-r-12);
  }
  .tour-m-row:first-of-type { margin-top: var(--bh-space-16); }
  .tour-m-row-text { min-width: 0; }
  .tour-m-row-title { display: block; font-size: 14px; font-weight: var(--bh-w-bold); color: var(--bh-ink); }
  .tour-m-row-sub { display: block; font-size: 12px; color: var(--bh-body); margin-top: 2px; }
  .tour-m-row .tour-pill { font-size: 11px; padding: 4px 10px; }
  .tour-m-match {
    margin-top: var(--bh-space-16); padding: 14px;
    background: var(--bh-white); border: 1.5px solid #C9DBFB; border-radius: var(--bh-r-12);
  }
  .tour-m-match-head { display: flex; align-items: center; gap: 10px; }
  .tour-m-avatar {
    flex: 0 0 auto; width: 40px; height: 40px; 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);
  }
  .tour-m-match-id { min-width: 0; }
  .tour-m-match .tour-lead-name { font-size: 14.5px; }
  .tour-m-match .tour-lead-sub { font-size: 12px; }
  .tour-m-score { margin-left: auto; text-align: right; }
  .tour-m-score-label { display: block; font-size: 9px; font-weight: var(--bh-w-xbold); letter-spacing: 1px; color: var(--bh-body); }
  .tour-m-score-num { display: block; font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 22px; color: var(--bh-accent); }
  .tour-m-match .tour-lead-btn { height: 40px; margin-top: 14px; border-radius: var(--bh-r-8); }
  .tour-screen--mobile .tour-main-note { margin-top: var(--bh-space-16); }
}

/* ---------- Run it your way ---------- */
.runit-sub { font-size: 20px; }
.runit-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bh-space-40);
  padding-inline: 10px; margin-top: 54px;
}
.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: 33px 42px 30px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.runit-label {
  font-size: 14.5px; font-weight: var(--bh-w-xbold); letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--bh-body);
}
.runit-label--ai { color: var(--bh-accent); }
.runit-title { font-size: 36px; letter-spacing: -1px; margin-top: 10px; }
.runit-checks { margin-top: 46px; width: 100%; }
.runit-checks 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-checks li + li { margin-top: var(--bh-space-30); }
.runit-check {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E5E8F0; color: var(--bh-body);
  font-size: 13px; font-weight: var(--bh-w-xbold);
}
.runit-checks--ai .runit-check { background: var(--bh-accent); color: var(--bh-white); }
.runit-btn {
  margin-top: auto; min-width: 220px; height: 54px;
  background: var(--bh-accent); color: var(--bh-white); font-size: 16.5px;
}
.runit-foot {
  text-align: center; margin-top: 42px;
  font-size: 15.5px; font-weight: var(--bh-w-semibold);
}
@media (max-width: 1023px) {
  .runit-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); padding-inline: 0; margin-top: var(--bh-space-24); }
  .runit-sub { font-size: 16px; }
  .runit-card { border-radius: 18px; padding: var(--bh-space-8); }
  .runit-inner { border-radius: var(--bh-r-12); min-height: 0; padding: 26px 24px 24px; }
  .runit-label { font-size: 11px; letter-spacing: 1px; }
  .runit-title { font-size: 22px; letter-spacing: -0.5px; margin-top: var(--bh-space-12); }
  .runit-checks { margin-top: var(--bh-space-24); }
  .runit-checks li { font-size: 16px; font-weight: var(--bh-w-regular); gap: var(--bh-space-12); align-items: flex-start; }
  .runit-checks li + li { margin-top: 14px; }
  .runit-check { width: 22px; height: 22px; font-size: 12px; background: #CFD4E0; color: var(--bh-white); margin-top: 1px; }
  .runit-btn { margin-top: var(--bh-space-20); width: 100%; min-width: 0; height: 44px; font-size: 15px; }
  .runit-card--human .runit-btn { background: var(--bh-white); color: var(--bh-ink); border: 1.5px solid var(--bh-border); }
  .runit-foot { margin-top: var(--bh-space-16); font-size: 16px; font-weight: var(--bh-w-regular); }
}

/* ---------- Advisory add-on ---------- */
.adv-grid { display: grid; grid-template-columns: 560px 630px; column-gap: 90px; align-items: start; }
.adv-eyebrow { font-weight: var(--bh-w-bold); letter-spacing: 2px; }
.adv-h {
  font-weight: var(--bh-w-xbold);
  font-size: 46px; letter-spacing: -1px; line-height: 1.04;
  margin-top: var(--bh-space-16);
}
.adv-desc-copy { font-size: 18px; line-height: 1.5; color: #4B5563; max-width: 520px; margin-top: var(--bh-space-20); } /* review E3 */
.adv-cta { margin-top: var(--bh-space-36); min-width: 210px; height: 56px; font-size: 16px; } /* review E3 */
.adv-card {
  background: var(--bh-white); border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  padding: 14px 14px var(--bh-space-24);
}
.adv-head {
  position: relative; height: 250px; border-radius: var(--bh-r-12);
  background: linear-gradient(135deg, var(--bh-accent) 0%, #2563C8 100%);
  padding: 26px var(--bh-space-24);
}
.adv-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 18px; border-radius: var(--bh-r-12);
  background: var(--bh-white); color: var(--bh-accent);
  font-size: 13px; font-weight: var(--bh-w-xbold); letter-spacing: 1px;
}
.adv-title {
  position: absolute; left: var(--bh-space-24); bottom: 36px;
  font-family: var(--bh-font-display); font-weight: var(--bh-w-black);
  font-size: 36px; letter-spacing: -1px; color: var(--bh-white);
}
.adv-card-desc { font-size: 20px; color: var(--bh-body); margin: var(--bh-space-36) 10px 0; }
.adv-checks { margin: var(--bh-space-24) 10px 0; } /* review E3 */
.adv-checks li {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: var(--bh-w-semibold); color: var(--bh-ink);
}
.adv-checks li + li { margin-top: var(--bh-space-16); } /* review E3 */
.adv-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E8F0FE; color: var(--bh-accent);
  font-size: 12px; font-weight: var(--bh-w-bold);
}
.adv-learn { display: none; }
@media (min-width: 768px) and (max-width: 1339px) {
  .adv-grid { grid-template-columns: 1fr 1.1fr; column-gap: var(--bh-space-48); }
}
@media (max-width: 767px) {
  .adv-grid { display: block; }
  .adv-eyebrow { letter-spacing: 1.2px; }
  .adv-h { font-size: var(--bh-m-fs-h2); letter-spacing: -0.5px; margin-top: var(--bh-space-16); }
  .adv-br { display: none; }
  .adv-desc-copy { font-size: 16px; margin-top: var(--bh-space-16); }
  .adv-cta { display: none; }
  .adv-card {
    margin-top: var(--bh-space-16); border: 1px solid #ECEEF3;
    border-radius: var(--bh-r-16); box-shadow: none;
    padding: var(--bh-space-32) var(--bh-space-32) var(--bh-space-32);
  }
  .adv-head { height: auto; background: none; padding: 0; }
  .adv-pill {
    height: 26px; padding: 0 12px; border-radius: var(--bh-r-8);
    border: 1px solid var(--bh-accent); background: var(--bh-white);
    font-size: 11px;
  }
  .adv-title { position: static; font-size: 22px; letter-spacing: -0.5px; color: var(--bh-ink); margin-top: var(--bh-space-16); }
  .adv-card-desc { font-size: 16px; margin: var(--bh-space-8) 0 0; }
  .adv-checks { margin: 18px 0 0; }
  .adv-checks li { font-size: 16px; font-weight: var(--bh-w-regular); align-items: flex-start; }
  .adv-checks li + li { margin-top: var(--bh-space-12); }
  .adv-check { background: var(--bh-accent); color: var(--bh-white); margin-top: 2px; }
  .adv-learn {
    display: inline-flex; margin-top: var(--bh-space-40);
    background: var(--bh-accent); color: var(--bh-white);
    height: 44px; padding-inline: var(--bh-space-24); font-size: 15px;
  }
}

/* ---------- Integrations ---------- */
.integ-h2 { font-size: 56px; } /* Figma 60; reduced for browser Figtree width so the line holds (rule 17) */
.integ-body { max-width: 760px; font-size: 21px; line-height: 35px; }
.integ-grid {
  display: flex; justify-content: center; gap: var(--bh-space-32);
  margin-top: var(--bh-space-60);
}
.integ-chip {
  display: flex; align-items: center; justify-content: center;
  width: 220px; height: 84px;
  background: var(--bh-white); border-radius: var(--bh-r-12);
  box-shadow: var(--bh-shadow-card);
}
.integ-chip img { max-width: 130px; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.integ-cta-row { text-align: center; margin-top: 44px; }
.integ-add {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 280px; height: 52px; border-radius: var(--bh-r-12);
  border: 1.5px solid var(--bh-accent); color: var(--bh-accent);
  font-size: 15px; font-weight: var(--bh-w-semibold);
}
@media (max-width: 767px) {
  .integ-h2 { font-size: var(--bh-m-fs-h2); }
  .integ-body { font-size: 16px; line-height: 1.5; }
  .integ-grid { flex-wrap: wrap; gap: var(--bh-space-12); margin-top: var(--bh-space-16); }
  .integ-chip { width: 165px; height: 84px; }
  .integ-chip img { max-width: 117px; max-height: 36px; }
  .integ-cta-row { margin-top: var(--bh-space-16); }
  .integ-add { min-width: 212px; height: 44px; border-width: 1px; border-style: dashed; font-size: 14px; font-weight: var(--bh-w-bold); }
}

/* ---------- Security ---------- */
.sec-eyebrow { font-size: var(--bh-fs-fine); }
.sec-h2 {
  font-size: 40px; letter-spacing: -1px; line-height: 1.12;
}
.sec-sub { font-size: 18px; line-height: 1.5; max-width: 720px; }
.sec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bh-space-16);
  margin: 38px -16px 0;
}
.sec-card {
  background: var(--bh-white); border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  min-height: 385px; padding: 38px 34px;
}
.sec-icon { width: 68px; height: 68px; object-fit: contain; }
.sec-title { font-family: var(--bh-font-body); font-size: 24px; font-weight: var(--bh-w-bold); min-height: 56px; display: flex; align-items: flex-start; margin-top: 31px; }
.sec-desc { font-size: 17px; line-height: 28px; margin-top: var(--bh-space-12); }
@media (max-width: 1023px) {
  .sec-grid { grid-template-columns: 1fr 1fr; margin-inline: 0; }
}
@media (max-width: 767px) {
  .sec-h2 { font-size: var(--bh-m-fs-h2); letter-spacing: -0.5px; }
  .sec-sub { font-size: 16px; }
  .sec-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-24); }
  .sec-card { min-height: 0; padding: 34px; }
  .sec-title { min-height: 0; margin-top: 31px; }
}

/* ---------- Testimonials ---------- */
.testi-carousel { position: relative; margin-top: 0; }
.testi-slide { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 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: 27px; }
.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: 102px; 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; }
.bh-car-controls { margin-top: 28px; }
@media (max-width: 767px) {
  .testi-slide { padding-top: 0; }
  .testi-quote { font-family: var(--bh-font-body); font-weight: var(--bh-w-medium); font-size: 16px; line-height: 1.5; max-width: 294px; }
  .testi-quote::before { content: '\201C'; }
  .testi-quote::after { content: '\201D'; }
  .testi-caption { margin-top: 28px; }
  .testi-avatar { width: 46px; height: 46px; }
  .testi-name { font-size: 15px; margin-top: var(--bh-space-12); }
  .testi-role { font-size: 13px; margin-top: 2px; }
  .testi-nav-row {
    display: flex; align-items: center; justify-content: center;
    gap: var(--bh-space-16); margin-top: 42px;
  }
  .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; }
}
.testi-carousel { margin-top: var(--bh-space-32); }
@media (max-width: 767px) { .testi-carousel { margin-top: 42px; } }

/* ---------- FAQ ---------- */
.faq-list { width: min(1000px, 100%); margin: 42px auto 0; }
.faq-list .bh-acc-item + .bh-acc-item { margin-top: var(--bh-space-12); }
.faq-list .bh-acc-toggle { padding: 20px 28px; font-size: 17px; line-height: 1.3; }
.faq-list .bh-acc-item.is-open .bh-acc-toggle { padding-top: 28px; padding-bottom: 8px; }
.faq-list .bh-acc-item.is-open { border-color: var(--bh-border); }
.faq-list .bh-acc-glyph { 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 60px var(--bh-space-24) 28px; }
.faq-list .bh-acc-body p { font-size: 15.5px; line-height: 1.3; }
@media (max-width: 767px) {
  .faq-list { margin-top: var(--bh-space-24); }
  .faq-list .bh-acc-item + .bh-acc-item { margin-top: var(--bh-space-16); }
  .faq-list .bh-acc-toggle { padding: 18px 20px; font-size: 16px; align-items: flex-start; }
  .faq-list .bh-acc-item.is-open .bh-acc-toggle { padding-top: 18px; padding-bottom: 6px; }
  .faq-list .bh-acc-body > p { padding: 0 var(--bh-space-20) var(--bh-space-20); }
  .faq-list .bh-acc-body p { font-size: 16px; line-height: 1.5; }
}

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative; overflow: hidden; border-radius: var(--bh-r-16);
  min-height: 560px;
  background: linear-gradient(90deg, #14224E 0%, #2456B8 50%, var(--bh-accent) 100%);
  box-shadow: var(--bh-shadow-lift);
  display: flex; align-items: center;
}
.cta-copy { position: relative; z-index: 1; max-width: 790px; padding: var(--bh-space-60) 72px; } /* 646 content + 144 pad (border-box) */
.cta-h { font-size: 52px; letter-spacing: -1px; line-height: 1.02; color: var(--bh-white); }
.cta-body { font-size: 20px; line-height: 1.46; color: var(--bh-white-85); max-width: 520px; margin-top: var(--bh-space-24); }
.cta-btn { background: var(--bh-white); color: var(--bh-accent); margin-top: var(--bh-space-24); min-width: 169px; height: 60px; font-size: 18px; }
.cta-photo { position: absolute; right: 18px; top: 15px; width: 476px; height: auto; }
.cta-h-mobile, .cta-body-mobile { display: none; }
@media (max-width: 767px) {
  .cta .bh-container { width: calc(100% - 2 * var(--bh-m-page-margin)); }
  .cta-banner {
    min-height: 400px; border-radius: var(--bh-r-16);
    background: linear-gradient(131.2deg, #14224E 0%, #2456B8 50%, var(--bh-accent) 100%);
    align-items: flex-start;
  }
  .cta-h-desktop, .cta-body-desktop { display: none; }
  .cta-h-mobile, .cta-body-mobile { display: inline; }
  .cta-copy { padding: var(--bh-space-40) var(--bh-space-24); }
  .cta-h { font-size: 30px; letter-spacing: -0.5px; line-height: 1.04; }
  .cta-body { font-size: 16px; color: var(--bh-white); margin-top: var(--bh-space-24); max-width: 285px; }
  .cta-btn { margin-top: var(--bh-space-20); min-width: 0; height: 40px; padding-inline: var(--bh-space-24); font-size: 15px; }
  .cta-photo { width: 185px; right: 15px; top: auto; bottom: -196px; }
}

/* ---------- Footer page-level tweaks (verbatim from 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; }
}

/* ---------- 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 ADD-ON card is an <article>; this stretched link makes the whole card open
   Blanket Advisory, matching the CTA beside it. */
.adv-card { position: relative; }
.adv-card-link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }

/* === CTA banner - width-proof geometry (2026-08-26, W01) ===
   Super Broker hangs the figure past the bottom edge on purpose (bottom:-196px
   inside overflow:hidden), so only the DESKTOP width cap is applied here - the
   mobile composition is left exactly as designed. */
.cta-copy  { max-width: min(790px, 54%); }
.cta-photo { max-width: 44%; }

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

/* === two columns at 360 (2026-08-26, W19) ===
   .integ-chip was a fixed 165px: 165*2 + 12 gap = 342 vs 312 available at 360. */
@media (max-width: 767px) {
  .integ-chip { width: calc(50% - 6px); max-width: 165px; }
}

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

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

/* === CTA banner - Super Broker figure must fit whole (2026-08-26, W01b) ===
   The figure is now a waist-up crop (see tools/fix_w01b_jeff.js), so it is sized by
   HEIGHT and bottom-aligned: the bottom of the cut-out and the bottom of the banner are
   the same line, and nothing is left outside to be chopped. Width follows from the
   aspect, which is why there is no width here to fight with .cta-copy.
   The earlier rule hung him at bottom:-196px on purpose; that intent is gone. */
.cta-photo {
  right: 18px;
  top: auto;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 34%;          /* only a backstop - height decides the size */
  object-fit: contain;
  object-position: bottom center;
}
@media (max-width: 1023px) {
  /* 70% of a 400px banner = 280px tall, ~163px wide. Sheena's box on the other pages is
     215x221, but she is a chest-up crop and he is waist-up - matching her BOX would make
     him 128px wide. Matching her presence is the right target, not her rectangle. */
  .cta-photo { height: 70%; width: auto; max-width: 48%; right: 12px; bottom: 0; }
}

/* === Blanket Advisory card - Figma rhythm (2026-08-26, T30) ===
   Numbers read off Figma 8274:3446 (desktop) and 8929:4009 (mobile). See
   tools/fix_t30_advisory.js for the before/after table. */

/* ---- desktop ---- */
/* Figma's card is 540 tall and its last bullet ends at 470, so the design carries 70px of
   air under the bullets. The build had the card's 24px padding and nothing else, which is
   why it came out 494 - short, not loose, on this surface. */
.adv-card { padding-bottom: 70px; }
.adv-title { line-height: 50px; }              /* was 55.8 inherited - card title sat 6px high */
.adv-card-desc {
  line-height: 26px;                           /* Figma 52 tall over two lines */
  margin: var(--bh-space-36) 18px 0 24px;      /* x=38 from the card edge, 560 wide */
}
.adv-checks { margin: var(--bh-space-24) 18px 0 24px; }
.adv-checks li { line-height: 22px; }          /* row height = the 22px check */
.adv-checks li + li { margin-top: 14px; }      /* 22 + 14 = Figma's 36px pitch, was 42 */

/* ---- mobile ---- */
@media (max-width: 767px) {
  .adv-card { padding: 26px 34px 34px; }       /* Figma pad 26/34/34/34, was a flat 32 */
  .adv-title { line-height: 26px; margin-top: 14px; }
  .adv-card-desc { line-height: 22px; margin: 14px 0 0; }
  .adv-checks { margin: 14px 0 0; }
  .adv-checks li { line-height: 21px; }        /* 1 line -> 22 (the check), 2 lines -> 42 */
  .adv-checks li + li { margin-top: 11px; }    /* Figma's bullets frame is gap 11 */
  .adv-check { margin-top: 0; }                /* the global rule centres it; this fought it */
  .adv-learn { height: 48px; padding-inline: var(--bh-space-24); margin-top: 38px; }
}

/* === CTA banner - tablet + desktop framing (2026-08-26) ===
   Lior: "Jeff's image is positioned too high. Please lower it so that the bottom border of
   the CTA banner will meet the red line I drew." That line measures at 89% of the figure's
   height, so the figure moves down 11% of the banner: the banner's bottom edge now cuts him
   where he asked, and his head gains the clearance it did not have when he was flush to the
   top. Only where the figure is full-height - below 1024 it is 70% and already has room. */
@media (min-width: 1024px) {
  /* SIZE, not just position. Rendered against Figma's own banner (8356:2792) the build's
     Jeff was much the smaller of the two - about 26% of the banner width against Figma's
     34% - which is the "sits way to the right with a lot of blank space to the left" Lior
     saw. Figma has him at roughly 435px wide in a 1280 banner with his crossed arms
     reaching the bottom edge and about 21px of clearance over his head.
     height:134% gives 749px, so width follows the 0.581 crop to 435; bottom:-37.5% puts
     his head 21px down and the banner's bottom edge across his forearms, which is where
     Lior's line was. */
  body .cta-photo {
    width: 34%;              /* Figma's proportion, measured off its own render */
    height: auto;
    max-width: none;         /* the shared 1024-1279 rule caps at 56% for Sheena; Jeff's
                                crop is much taller so that cap made him 45% at 1024 */
    top: 20px; bottom: auto; /* 20px of head clearance, and the banner's bottom edge falls
                                across his forearms - the line Lior drew */
    right: 18px;
  }
}
/* Super Broker's banner is TALLER than the shared one at 768-1023 (720x774 against
   720x400) because its copy runs longer. The shared rule sizes the figure from the banner
   height, which on a 774px banner blew Jeff up to 382x774 and cropped 15% of him. He keeps
   his own 70% here - measured 315x542 at 768, contain, nothing cropped. The "body " prefix
   is needed to out-specify the shared rule, which uses it too. */
@media (min-width: 768px) and (max-width: 1023px) {
  body .cta-photo {
    height: 70%; width: auto; max-width: 48%;
    top: auto; bottom: 0;
    object-fit: contain; object-position: bottom center;
  }
}