/* ============================================================
   BLANKET ADVISORY — page-specific styles. Tokens only.
   Desktop values match Figma 8274:3781; mobile 9404:51.
   Page accent = Super Broker blue (body.theme-broker).
   ============================================================ */

/* ---------- SECTION RHYTHM (measured from Figma geometry) ---------- */
@media (min-width: 768px) {
  #the-gap { margin-top: 100px; }
  #what-i-do { margin-top: 92px; }
  #how-it-works { margin-top: 84px; }
  #book-a-diagnostic { margin-top: 48px; }
  #about-jeff { margin-top: 120px; }
  #faq { margin-top: 92px; }
  #cta { margin-top: 60px; padding-bottom: 90px; }
}
@media (max-width: 767px) {
  #the-gap, #what-i-do, #how-it-works, #book-a-diagnostic,
  #about-jeff, #faq, #cta { margin-top: 80px; }
  #cta { padding-bottom: 40px; }
}


/* ---------- Announcement bar (verbatim chrome support, 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 (verbatim chrome support, 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 (verbatim chrome support, 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");
}


/* ---------- Hero ---------- */
.adv-hero { padding-top: 61px; }
.adv-hero-inner { display: grid; grid-template-columns: 1fr 460px; gap: var(--bh-space-60); align-items: start; }
.adv-hero-copy { max-width: 760px; }
.adv-hero-h1 {
  font-size: 52px; line-height: 58px; letter-spacing: 0;
  color: var(--bh-ink); margin-top: 16px; max-width: 760px;
}
.adv-accent { color: var(--bh-blue); }
.adv-lead { font-size: 21px; line-height: 1.35; color: var(--bh-body); margin-top: 30px; max-width: 700px; }
.adv-hero-cta { margin-top: 35px; min-width: 220px; height: 56px; font-size: 16px; font-weight: var(--bh-w-semibold); }
.adv-hero-img {
  width: 440px; height: 470px; object-fit: contain; object-position: center top;
  /* cutout floats free — no frame or shadow around the image box (review M6) */
  justify-self: start;
  margin: -30px 0 0;   /* Figma 8274:3918 sits at x900 / y150 */
}
@media (max-width: 1023px) {
  .adv-hero { padding-top: var(--bh-space-40); }
  .adv-hero-inner { grid-template-columns: 1fr; gap: var(--bh-space-16); }
  .adv-hero-h1 { font-size: 31px; line-height: 36px; letter-spacing: -1px; margin-top: 16px; }
  .adv-lead { font-size: 16px; line-height: 24px; margin-top: var(--bh-space-16); }
  .adv-hero-img { width: 100%; height: 365px; margin: var(--bh-space-16) 0 0; }
  .adv-hero-cta { margin-top: var(--bh-space-16); width: 100%; min-width: 0; height: 50px; font-size: 15px; }
}

/* ---------- Shared section type ---------- */
.adv-h2 { font-size: 32px; line-height: 1.18; letter-spacing: 0; color: var(--bh-ink); }
.gap-sec { position: relative; }
/* Figma 8274:3847 breaks after "installed." — hold the designed 2-line break */
.gap-h2 { font-size: 34px; line-height: 42px; max-width: 1000px; }
.gap-break { display: block; }
.adv-section-body { max-width: 840px; font-size: 17px; line-height: 22px; color: var(--bh-body); }
#the-gap .bh-section-header, #how-it-works .bh-section-header { gap: var(--bh-space-16); }
#the-gap .adv-section-body { margin-top: var(--bh-space-8); }
#how-it-works .adv-section-body { margin-top: var(--bh-space-16); }
@media (max-width: 767px) {
  .adv-h2, .gap-h2 { font-size: 24px; line-height: 29px; letter-spacing: -0.5px; }
  .gap-break { display: none; }
  .adv-section-body { font-size: 16px; line-height: 24px; }
  .bh-eyebrow { font-size: 12px; letter-spacing: 1.5px; }
}

/* ---------- What I do ---------- */
.what-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bh-space-40);
  margin-top: var(--bh-space-40);
}
.what-card {
  background: var(--bh-white); border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  padding: var(--bh-space-32);
  min-height: 336px;
}
.what-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--bh-r-16);
  background: var(--bh-blue); color: var(--bh-white);
  font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 20px;
}
.card-title { font-size: 22px; line-height: 1.18; letter-spacing: 0; color: var(--bh-ink); margin-top: 22px; }
.card-body { font-size: 16px; line-height: 1.5; color: var(--bh-body); margin-top: var(--bh-space-16); }
@media (max-width: 1023px) {
  .what-grid { grid-template-columns: 1fr; gap: var(--bh-space-24); margin-top: var(--bh-space-24); }
  .what-card { min-height: 0; padding: 22px; border: 1px solid #E5E8EE; box-shadow: none; }
  .what-num { width: 44px; height: 44px; border-radius: 10px; font-size: 18px; }
  .card-title { font-size: 20px; margin-top: var(--bh-space-12); }
  .card-body { margin-top: var(--bh-space-12); }
}

/* ---------- How it works ---------- */
.how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bh-space-40);
  margin-top: 56px;
}
.how-card {
  position: relative;
  background: var(--bh-white); border: 1.5px solid #D1D6E0; border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  padding: 28px;
  min-height: 184px;
}
.how-num {
  position: absolute; left: 28px; top: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bh-blue); color: var(--bh-white);
  font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 18px;
}
.how-head { display: block; padding-left: 58px; min-height: 44px; }
.how-title { display: block; font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 19px; line-height: 23px; color: var(--bh-ink); }
.how-meta { display: block; font-size: 13px; font-weight: var(--bh-w-semibold); line-height: 17px; color: var(--bh-blue); margin-top: 3px; }
.how-desc { font-size: 14px; line-height: 1.3; color: var(--bh-body); margin-top: 30px; }
.guarantee {
  display: flex; align-items: center; gap: 26px;
  background: #1E2A52; border-radius: var(--bh-r-16);
  padding: 44px 40px;
  margin-top: 50px;
}
.guarantee-badge {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  background: var(--bh-blue); color: var(--bh-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: var(--bh-w-bold);
}
.guarantee-eyebrow {
  font-size: var(--bh-fs-eyebrow); font-weight: var(--bh-w-xbold);
  letter-spacing: var(--bh-ls-eyebrow); text-transform: uppercase; color: var(--bh-blue);
}
.guarantee-text { max-width: 1040px; font-size: 23px; font-weight: var(--bh-w-medium); line-height: 1.3; color: var(--bh-white); margin-top: var(--bh-space-8); }
@media (max-width: 1023px) {
  .how-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-24); }
  .how-card { min-height: 0; padding: 22px; border-width: 1px; border-color: #E5E8EE; box-shadow: none; }
  .how-num { left: 22px; top: 22px; width: 40px; height: 40px; }
  .how-head { padding-left: 54px; min-height: 0; display: flex; align-items: center; gap: var(--bh-space-8); }
  .how-title { font-size: 18px; }
  .how-meta {
    margin-top: 0; background: #EDF2FC; border-radius: var(--bh-r-6);
    padding: 2px var(--bh-space-8); font-size: 11px; line-height: 16px;
  }
  .how-desc { font-size: 16px; line-height: 20px; margin-top: var(--bh-space-16); padding-left: 54px; }
  .guarantee { flex-direction: column; align-items: flex-start; gap: var(--bh-space-16); padding: 24px; margin-top: var(--bh-space-16); }
  .guarantee-badge { width: 28px; height: 28px; font-size: 14px; }
  .guarantee-copy { display: contents; }
  .guarantee-eyebrow { font-size: 12px; letter-spacing: 1.2px; }
  .guarantee-text { font-size: 16px; line-height: 1.38; margin-top: 0; }
}

/* ---------- Pricing ---------- */
.plan-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bh-space-40);
  margin-top: 60px;
}
.plan-card {
  position: relative;
  background: var(--bh-white); border: 1px solid #E2E5EC; border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  padding: 34px var(--bh-space-32) 24px;
  display: flex; flex-direction: column;
  min-height: 384px;
}
.plan-card--featured { border: 2px solid var(--bh-blue); }
.plan-flag {
  position: absolute; left: 24px; top: -14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 150px; height: 28px; border-radius: 14px;
  background: var(--bh-blue); color: var(--bh-white);
  font-family: var(--bh-font-display); font-weight: var(--bh-w-xbold);
  font-size: 11px; letter-spacing: 1px;
}
.plan-name { font-family: var(--bh-font-body); font-weight: var(--bh-w-bold); font-size: 21px; line-height: 27px; letter-spacing: 0; color: var(--bh-ink); }
.plan-price {
  font-family: var(--bh-font-display); font-weight: var(--bh-w-black);
  font-size: 42px; line-height: 50px; letter-spacing: -1px; color: var(--bh-ink);
  margin-top: 9px; display: flex; align-items: baseline; gap: var(--bh-space-8);
}
.plan-price--accent { color: var(--bh-blue); }
.plan-per { font-family: var(--bh-font-body); font-size: 15px; font-weight: var(--bh-w-medium); letter-spacing: 0; color: var(--bh-body); }
.plan-rule { border: 0; border-top: 1px solid #E2E5EC; margin: 20px 0 0; }
.plan-feats { margin-top: 22px; display: flex; flex-direction: column; gap: var(--bh-space-16); }
.plan-feats li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 18px; color: #1E2A52; }
.feat-check {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--bh-blue); color: var(--bh-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--bh-w-bold);
}
.plan-cta { margin-top: auto; height: 48px; width: 100%; font-size: 15px; font-weight: var(--bh-w-bold); border-radius: var(--bh-r-btn); }
.plan-cta--ghost { background: var(--bh-white); color: var(--bh-blue); border: 1.5px solid var(--bh-blue); }
.plan-cta--solid { background: var(--bh-blue); color: var(--bh-white); }
.addon-label {
  font-family: var(--bh-font-display); font-weight: var(--bh-w-xbold);
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bh-blue);
  margin-top: 40px;
}
.addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bh-space-40); margin-top: var(--bh-space-12); }
.pricing { position: relative; }
.addon-card {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--bh-space-24);
  background: var(--bh-white); border: 1px solid #E2E5EC; border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  padding: 22px 28px 20px;
  min-height: 128px;
}
.addon-copy { min-width: 0; }
.addon-name { font-family: var(--bh-font-body); font-weight: var(--bh-w-bold); font-size: 18px; line-height: 23px; letter-spacing: 0; color: var(--bh-ink); }
.addon-price {
  font-family: var(--bh-font-display); font-weight: var(--bh-w-black);
  font-size: 26px; line-height: 31px; color: var(--bh-ink);
  margin-top: 7px; display: flex; align-items: baseline; gap: var(--bh-space-8);
}
.addon-per { font-family: var(--bh-font-body); font-size: 13px; font-weight: var(--bh-w-medium); color: var(--bh-body); }
.addon-desc { font-size: 13.5px; line-height: 18px; color: var(--bh-body); margin-top: 7px; }
.addon-cta {
  flex: 0 0 auto; width: 162px; height: 44px;
  background: var(--bh-blue); color: var(--bh-white);
  font-size: 13.5px; font-weight: var(--bh-w-bold); border-radius: var(--bh-r-btn);
  padding-inline: 0; white-space: nowrap;
}
@media (max-width: 1023px) {
  .plan-grid { grid-template-columns: 1fr; gap: 22px; margin-top: var(--bh-space-24); }
  .plan-card { min-height: 0; padding: 24px; border-color: #E5E8EE; box-shadow: none; }
  .plan-card--featured { padding-top: 26px; }
  .plan-flag { position: static; width: 113px; height: 23px; border-radius: 20px; font-size: 10.5px; margin-bottom: var(--bh-space-16); }
  .plan-name { font-size: 15px; line-height: 20px; }
  .plan-price { font-size: 34px; line-height: 38px; margin-top: var(--bh-space-16); }
  .plan-rule { margin-top: var(--bh-space-16); }
  .plan-feats { margin-top: 14px; }
  .plan-feats li { font-weight: var(--bh-w-medium); color: var(--bh-ink); }
  .feat-check { width: 20px; height: 20px; font-size: 11px; }
  .plan-cta { margin-top: var(--bh-space-16); font-size: 14px; }
  .addon-label { text-align: center; margin-top: 34px; color: var(--bh-body); font-family: var(--bh-font-body); font-size: 12px; letter-spacing: 1.5px; }
  .addon-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-16); }
  .addon-card { flex-direction: column; align-items: flex-start; gap: var(--bh-space-16); padding: 20px 22px; min-height: 0; border-color: #E5E8EE; box-shadow: none; }
  .addon-name { font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 17px; line-height: 22px; }
  .addon-price { font-size: 20px; line-height: 24px; margin-top: var(--bh-space-12); }
  .addon-per { font-size: 12px; }
  .addon-desc { font-size: 16px; line-height: 20px; margin-top: var(--bh-space-12); }
  .addon-cta { width: 166px; }
}

/* ---------- About Jeff ---------- */
/* Figma: image x120 y+30, copy column x560 w720 */
.about-jeff-inner { display: grid; grid-template-columns: 380px 1fr; gap: 60px; align-items: start; padding-left: 40px; }
.about-jeff-img { width: 380px; height: 438px; object-fit: cover; border-radius: var(--bh-r-20); margin-top: 30px; }
/* Figma 8274:3893 breaks after "operating." */
.about-jeff-h2 { max-width: 380px; margin-top: var(--bh-space-16); }
.about-jeff-body { font-size: 20px; line-height: 29px; color: var(--bh-body); margin-top: 38px; max-width: 720px; }
.stat-row { display: flex; gap: 15px; margin-top: 44px; }
.stat-card {
  width: 230px; height: 104px;
  background: var(--bh-white); border: 1px solid #E4E4EA; border-radius: var(--bh-r-12);
  padding: 22px;
}
.stat-num { display: block; font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 34px; line-height: 41px; letter-spacing: -1px; color: var(--bh-blue); }
.stat-label { display: block; font-size: 13.5px; line-height: 18px; font-weight: var(--bh-w-medium); color: var(--bh-body); margin-top: 3px; }
@media (max-width: 1023px) {
  .about-jeff-inner { grid-template-columns: 1fr; gap: 0; padding-left: 0; }
  .about-jeff-pic { order: 2; display: block; }
  .about-jeff-img { width: 100%; height: 365px; margin-top: var(--bh-space-24); border-radius: var(--bh-r-16); }
  .about-jeff-copy { order: 1; display: contents; }
  .about-jeff-copy .bh-eyebrow { order: 0; }
  .about-jeff-h2 { order: 1; margin-top: var(--bh-space-16); }
  .about-jeff-body { order: 3; font-size: 16px; line-height: 24px; margin-top: var(--bh-space-16); }
  .stat-row { order: 4; gap: 10px; margin-top: var(--bh-space-16); }
  .stat-card { width: auto; flex: 1 1 0; height: 85px; padding: 14px 8px; border-radius: 14px; text-align: center; }
  .stat-num { font-size: 26px; line-height: 30px; }
  .stat-label { font-size: 11.5px; line-height: 15px; }
}

/* ---------- FAQ (static — Figma has no answers for items 2–6) ---------- */
.faq-list { max-width: 1000px; margin: var(--bh-space-40) auto 0; }
.faq-item {
  background: var(--bh-white); border: 1px solid #E5E8EE; border-radius: var(--bh-r-16);
  padding: var(--bh-space-20) 28px;
}
.faq-item + .faq-item { margin-top: var(--bh-space-12); }
/* Item 1 is the only one with designed answer copy in Figma — the rest ship closed/static */
.faq-item--open { border-color: #E5E8EE; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bh-space-16);
  font-size: 17px; font-weight: var(--bh-w-bold); line-height: 22px; color: var(--bh-ink);
  /* button reset — the row is a real control now that answers exist */
  width: 100%; background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
/* Closed answers hide only when JS can reopen them (JS-off keeps all copy readable) */
html.js .faq-item:not(.faq-item--open) .faq-a { display: none; }
.faq-glyph {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: var(--bh-w-bold); color: var(--bh-ink);
}
.faq-glyph--open { background: var(--bh-blue); color: var(--bh-white); }
.faq-a { font-size: 15.5px; line-height: 20px; color: var(--bh-body); margin-top: 18px; max-width: 902px; }
@media (max-width: 767px) {
  .faq-list { margin-top: var(--bh-space-16); }
  .faq-item { padding: var(--bh-space-16) var(--bh-space-20); }
  .faq-q { font-size: 16px; line-height: 21px; }
  .faq-glyph { width: 26px; height: 26px; }
  .faq-a { font-size: 16px; line-height: 24px; }
}

/* ---------- CTA banner (Advisory blue) ---------- */
.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-blue) 100%);
  box-shadow: var(--bh-shadow-lift);
  display: flex; align-items: center;
}
.cta-copy { position: relative; z-index: 1; max-width: 764px; padding: var(--bh-space-60) 72px; }
.cta-h { font-size: 52px; line-height: 1.02; letter-spacing: -1px; color: var(--bh-white); max-width: 630px; }
.cta-body { font-size: 20px; line-height: 1.45; color: var(--bh-white); max-width: 520px; margin-top: var(--bh-space-24); }
.cta-body-mobile, .cta-btn-mobile { display: none; }
.cta-btn {
  background: var(--bh-white); color: var(--bh-blue);
  margin-top: 36px; min-width: 240px; height: 60px; font-size: 18px;
}
.cta-photo { position: absolute; right: 35px; top: 0; height: 100%; width: 553px; object-fit: contain; object-position: bottom center; }
@media (max-width: 1023px) {
  .cta-banner { min-height: 400px; border-radius: var(--bh-r-16); align-items: flex-start; }
  .cta-copy { padding: var(--bh-space-40) var(--bh-space-24); max-width: 100%; }
  .cta-h { font-size: 30px; line-height: 1.04; letter-spacing: -0.5px; max-width: 285px; }
  .cta-body { font-size: 16px; line-height: 1.4; max-width: 285px; margin-top: var(--bh-space-16); }
  .cta-body-desktop, .cta-btn-desktop { display: none; }
  .cta-body-mobile, .cta-btn-mobile { display: inline; }
  .cta-btn { margin-top: 26px; min-width: 174px; height: 46px; font-size: 15px; }
  /* Figma I9524:51;9417:5702 — full-body cutout FIT at 165x364, x170 y193, clipped by the banner */
  .cta-photo {
    left: 170px; right: auto; top: 193px; bottom: auto;
    width: 165px; height: 364px; object-fit: contain; object-position: top center;
  }
}


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

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

/* === advisory grid scope fix (2026-08-26, W10-fix) ===
   The W10 rule above must NOT reach mobile: below 768 the section is a single
   stacked column, and forcing a 380px first track made the image overflow by
   163px at 360. Scope the two-column grid to desktop only. */
@media (max-width: 767px) {
  .about-jeff-inner { display: block; padding-left: 0; }
  .about-jeff-img { width: 100%; max-width: 100%; }
}

/* === width-proof layout (2026-08-26, W10) ===
   .about-jeff-inner is `380px 1fr`, and the 1fr track cannot shrink below its
   min-content -- which .stat-row pins at 720px (3 x 230px cards + gaps). 380 + 60
   + 40 + 720 = 1200px inside a 976px container, so the page overflowed by 200px at
   1024. Let the track shrink and let the stat cards flex. */
.about-jeff-inner { grid-template-columns: 380px minmax(0, 1fr); }
@media (min-width: 768px) and (max-width: 1279px) {
  .about-jeff-inner { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 32px; padding-left: 0; }
  .about-jeff-img { width: 100%; height: auto; aspect-ratio: 380 / 438; }
  .stat-row { flex-wrap: wrap; }
  .stat-card { width: auto; flex: 1 1 180px; min-width: 0; }
}

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

/* T40 - measured at 390: the photo's top is y=484 and the CTA's is y=402, so the
   image sits BELOW the button. In the markup the CTA is the last child of
   .adv-hero-copy and <picture> is that div's next sibling, so once the grid
   collapses to one column the image can only land after the button.
   .adv-hero-copy is given display:contents so its children become items of the hero
   itself, and the order is set explicitly: eyebrow, headline, lead, photo, CTA.
   NOTE no child combinator: display:contents changes the BOX tree, not the DOM tree,
   so a child combinator from .adv-hero-inner still does not match the eyebrow (my
   first attempt used one and nothing moved). */
@media (max-width: 767px) {
  .adv-hero-inner { display: flex; flex-direction: column; }
  .adv-hero-copy { display: contents; }
  .adv-hero-inner .bh-eyebrow { order: 1; }
  .adv-hero-inner .adv-hero-h1 { order: 2; }
  .adv-hero-inner .adv-lead   { order: 3; }
  .adv-hero-inner picture     { order: 4; }
  .adv-hero-inner .adv-hero-cta { order: 5; }
}

/* === card hit area - A10 plan/editorial/press (2026-08-26) ===
   Lior's call: these cards become fully tappable, matching the story cards. The link
   already inside each card is stretched to the card's box rather than a new anchor
   being added, so each card still exposes exactly one target. */
.plan-card { position: relative; }
.plan-card a[href] { position: static; }
.plan-card a[href]::after { content: ""; position: absolute; inset: 0; z-index: 1; }

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

/* === advisory CTA photo anchored right (2026-08-27, A4) ===
   Was: left: 170px (fixed) with width overridden to 61.4%/215px by the later
   max-width:1023px block - so the photo ran up to 65px past the banner below 440
   and sat marooned mid-banner above 500. Figma's 390 frame puts the photo 165 wide
   ending 7px from the banner edge; expressed as ratios that is 48.2% wide at
   right: 2.05%, which holds at every width instead of only at 390. */
@media (max-width: 767px) {
  body .cta-photo { left: auto; right: 2.05%; width: 48.2%; }
}

/* === advisory CTA figure - tablet band (2026-08-27, A4b) ===
   600-1023 was still being served the PHONE cut-out (330x728) by the <picture>, while
   the layout had already switched to the wide banner composition at 768 - so the figure
   fell from 39% of the banner at 600 to 19% at 1000. The <picture> now switches at 599;
   this block gives the band the desktop framing.
   object-fit is CONTAIN on purpose: cover + object-position:100% 50% crops ~36px of his
   arm here, because the box is narrower than the image. contain cannot crop. */
@media (min-width: 600px) and (max-width: 1023px) {
  body .cta-photo {
    left: auto; right: 35px; top: auto; bottom: 0;
    height: 100%; width: auto; max-width: 48%;
    object-fit: contain; object-position: bottom right;
  }
  body .cta-copy { max-width: 50%; }
}