/* ============================================================
   GROWTH CALCULATOR — page-specific styles. Tokens only.
   Layout A from reports/plans/growth-calculator.html (approved 2026-09-04).
   Chrome (announce bar, dropdown internals, drill-ins, mobile
   menu) copied from pages/home/page.css verbatim, same as every ported page.
   ============================================================ */

/* ---------- SECTION RHYTHM ---------- */
@media (min-width: 768px) {
  #why { margin-top: 86px; }
  #what { margin-top: 86px; }
  #bigger { margin-top: 86px; }
  #testimonials { margin-top: 90px; }
  #faq { margin-top: 90px; }
  #book-a-demo { margin-top: 90px; padding-bottom: 90px; }
}
@media (max-width: 767px) {
  #curve, #why, #what, #bigger,
  #testimonials, #faq, #book-a-demo { margin-top: 80px; }
  #book-a-demo { padding-bottom: var(--bh-space-40); }
}

/* ---------- Announcement bar (copied 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;
  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 (copied 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); }
.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;
  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);
}
.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); }
.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; }
.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; }
.bh-dd-featured--pillow .bh-dd-featured-overlay .bh-btn { margin-top: var(--bh-space-12); }

/* ---------- Mobile menu internals (copied 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; }
.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 (split: copy left, calc card right) ---------- */
.hero { padding-top: 31px; overflow: hidden; }
.hero-inner { position: relative; }
.hero-copy { max-width: 640px; padding-left: var(--bh-space-20); position: relative; z-index: 1; }
.hero-eyebrow { display: block; }
.hero-h1 {
  font-size: 76px;
  letter-spacing: -2px;
  line-height: 1.02;
  margin-top: var(--bh-space-24);
}
.hero-sub {
  font-size: 22px; font-weight: var(--bh-w-medium); color: var(--bh-body);
  line-height: 1.32; max-width: 560px; margin-top: var(--bh-space-32);
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--bh-space-32); }
.hero-chip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 var(--bh-space-16);
  background: var(--bh-white); border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-12);
  font-size: 15px; font-weight: var(--bh-w-semibold); color: var(--bh-ink);
}
.hero-chip-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bh-accent); color: var(--bh-white);
  font-size: 9px; font-weight: var(--bh-w-bold);
}
.hero-cta-row { display: flex; align-items: center; gap: var(--bh-space-24); margin-top: var(--bh-space-36); }
.hero-cta { min-width: 186px; height: 56px; font-size: 17.5px; padding-inline: var(--bh-space-24); }

/* ---------- Hero split: calc card in the art slot ---------- */
.hero-inner--calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 520px); gap: var(--bh-space-48); align-items: center; }
.hero-inner--calc .hero-copy { max-width: 640px; }
/* the 520px-capped card leaves the copy column only ~390-450px here - too narrow
   for the 76px desktop H1, which wraps to 4 lines and blows the row height out */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-h1 { font-size: 48px; letter-spacing: -1.2px; line-height: 1.08; }
  .hero-sub { font-size: 17px; line-height: 1.4; margin-top: var(--bh-space-20); }
  .hero-chips { margin-top: var(--bh-space-20); }
  .hero-cta-row { margin-top: var(--bh-space-24); flex-wrap: wrap; gap: var(--bh-space-16) var(--bh-space-24); }
  .hero-cta { white-space: nowrap; }
  .hero-proof-label { white-space: nowrap; }
}
@media (max-width: 1023px) {
  .hero-inner--calc { grid-template-columns: 1fr; }
  .hero-inner--calc .hero-copy { max-width: 100%; }
  .calc-card { margin-top: var(--bh-space-30); max-width: 720px; margin-inline: auto; }
}
@media (max-width: 767px) {
  .hero { padding-top: var(--bh-space-36); text-align: center; }
  .hero-inner { display: flex; flex-direction: column; align-items: center; }
  .hero-copy { display: contents; }
  .hero-eyebrow { order: 1; }
  .hero-h1 { order: 2; font-size: 36px; letter-spacing: -1px; line-height: 1.15; margin-top: var(--bh-space-16); }
  .hero-sub { order: 3; font-size: 16px; line-height: 1.44; margin-top: var(--bh-space-16); margin-inline: auto; }
  .calc-card { order: 4; margin-top: var(--bh-space-16); width: 100%; }
  .hero-chips { order: 5; justify-content: center; gap: 8px; margin-top: var(--bh-space-16); }
  .hero-chip { height: 35px; padding: 0 var(--bh-space-16); border-radius: 10px; font-size: 13px; font-weight: var(--bh-w-bold); gap: 10px; }
  .hero-chip-check { width: 14px; height: 14px; font-size: 9px; }
  .hero-cta-row { order: 6; flex-direction: column; gap: var(--bh-space-16); margin-top: var(--bh-space-16); }
  .hero-cta { min-width: 147px; height: 50px; font-size: 15px; }
  .hero-cta .hero-cta-arrow { display: none; }
}

/* ---------- Calculator mechanics (sliders, results, warning) ---------- */
.field { display: grid; gap: var(--bh-space-8); }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bh-space-16); }
.field label { font-size: var(--bh-fs-fine); font-weight: var(--bh-w-bold); color: var(--bh-ink); }
.field output { font-family: var(--bh-font-body); font-weight: var(--bh-w-bold); font-size: var(--bh-fs-body); color: var(--bh-ink); font-variant-numeric: tabular-nums; }
.field output small { font-weight: var(--bh-w-medium); color: var(--bh-body); font-size: var(--bh-fs-fine); margin-left: 0; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; margin: 0; cursor: pointer; --pct: 30%; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--bh-accent) var(--pct), var(--bh-border) var(--pct)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--bh-border); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--bh-accent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--bh-white); border: 2px solid var(--bh-accent); box-shadow: var(--bh-shadow-card); transition: transform var(--bh-dur-fast) var(--bh-ease), box-shadow var(--bh-dur-fast) var(--bh-ease); }
input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--bh-white); border: 2px solid var(--bh-accent); box-shadow: var(--bh-shadow-card); }
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: var(--bh-shadow-soft); }
/* Global deep-purple focus ring (base.css R23) applies to the input itself; Firefox
   needs its own thumb treatment since the input's outline doesn't track the thumb there. */
input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--bh-color-deep-purple); outline-offset: 2px; }
.group-title { font-size: var(--bh-fs-fine); font-weight: var(--bh-w-xbold); letter-spacing: var(--bh-ls-eyebrow); text-transform: uppercase; color: var(--bh-body); }

.num { font-family: var(--bh-font-display); font-weight: var(--bh-w-black); letter-spacing: -1.5px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--bh-ink); }
.num.is-pos { color: var(--bh-green); }
.num.is-neg { color: var(--bh-pink-deep); }
.num-label { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); color: var(--bh-body); }

.calc-card { position: relative; z-index: 1; background: var(--bh-white); border-radius: var(--bh-r-20); box-shadow: var(--bh-shadow-lift); padding: var(--bh-space-32); display: grid; gap: var(--bh-space-24); }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bh-space-16) var(--bh-space-32); }
.calc-fields .group-title { grid-column: 1 / -1; margin-top: var(--bh-space-8); }
.calc-fields .group-title:first-child { margin-top: 0; }
.calc-results { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bh-bg-soft); border-radius: var(--bh-r-12); padding: var(--bh-space-20) var(--bh-space-8); }
.calc-results > div { display: grid; gap: var(--bh-space-8); text-align: center; padding: 0 var(--bh-space-8); border-left: 1px solid var(--bh-border); }
.calc-results > div:first-child { border-left: 0; }
.calc-results .num { font-size: 36px; }
/* always one line, winning or losing - the slot never reads empty and the box height never jumps */
.calc-note {
  grid-column: 1 / -1;
  margin-top: var(--bh-space-16); padding-top: var(--bh-space-16); border-top: 1px solid var(--bh-border);
  font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); color: var(--bh-body);
}
.calc-note.is-losing {
  display: flex; align-items: flex-start; gap: var(--bh-space-12);
  color: var(--bh-pink-deep);
}
.calc-note.is-losing::before { content: "!"; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--bh-pink-deep); color: var(--bh-white); display: inline-grid; place-items: center; font-weight: var(--bh-w-black); font-size: 13px; }
@media (max-width: 767px) {
  .calc-card { padding: var(--bh-space-24); }
  .calc-fields { grid-template-columns: 1fr; }
  .calc-results { grid-template-columns: 1fr; gap: var(--bh-space-16); }
  .calc-results > div { border-left: 0; border-top: 1px solid var(--bh-border); padding-top: var(--bh-space-16); text-align: left; grid-template-columns: 1fr auto; align-items: baseline; }
  .calc-results > div:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- Curve section (the ten-year projection chart) ---------- */
.curve-card { margin-top: var(--bh-space-40); background: var(--bh-white); border: 1px solid var(--bh-border); border-radius: var(--bh-r-16); box-shadow: var(--bh-shadow-card); padding: var(--bh-space-32); display: grid; gap: var(--bh-space-16); }
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--bh-font-body); font-size: 12px; font-weight: 600; fill: var(--bh-body); }
.chart .grid { stroke: var(--bh-border); stroke-width: 1; }
/* the ceiling is a reference line, not a warning - grey by default, pink only when losing */
.chart .ceiling { stroke: var(--bh-body); stroke-width: 1.5; stroke-dasharray: 6 6; transition: stroke var(--bh-dur-fast) var(--bh-ease); }
.is-losing .chart .ceiling { stroke: var(--bh-pink-deep); }
.chart .curve { fill: none; stroke: var(--bh-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: d var(--bh-dur-med) var(--bh-ease), stroke var(--bh-dur-fast) var(--bh-ease); }
.chart .area { fill: var(--bh-green); opacity: .10; transition: d var(--bh-dur-med) var(--bh-ease), fill var(--bh-dur-fast) var(--bh-ease), opacity var(--bh-dur-fast) var(--bh-ease); }
.is-losing .chart .curve { stroke: var(--bh-pink-deep); }
/* pink is never a background fill (design system) - losing state gets a neutral grey tint,
   the curve stroke stays pink-deep as the actual warning signal */
.is-losing .chart .area { fill: var(--bh-border); opacity: .6; }
.chart .ceiling-label { fill: var(--bh-body); font-weight: 800; transition: fill var(--bh-dur-fast) var(--bh-ease); }
.is-losing .chart .ceiling-label { fill: var(--bh-pink-deep); }
.chart .now { stroke: var(--bh-body); stroke-width: 1; }
.chart .now-label { fill: var(--bh-body); }
@media (prefers-reduced-motion: reduce) {
  .chart .curve, .chart .area, .chart .ceiling, .chart .ceiling-label { transition: none; }
}
.chart-cap { font-size: var(--bh-fs-fine); color: var(--bh-body); display: flex; gap: var(--bh-space-16); flex-wrap: wrap; }
.chart-cap i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.chart-cap .k1 i { background: var(--bh-green); } .is-losing .chart-cap .k1 i { background: var(--bh-pink-deep); }
.chart-cap .k2 i { background: repeating-linear-gradient(90deg, var(--bh-body) 0 5px, transparent 5px 9px); }
.is-losing .chart-cap .k2 i { background: repeating-linear-gradient(90deg, var(--bh-pink-deep) 0 5px, transparent 5px 9px); }
.chart-fallback { display: none; font-size: var(--bh-fs-fine); color: var(--bh-body); }
html:not(.js) .chart-fallback { display: block; }
@media (min-width: 768px) { #curve { margin-top: 86px; } }
@media (max-width: 767px) { #curve { margin-top: 80px; } .curve-card { margin-top: var(--bh-space-16); padding: var(--bh-space-24); } }

/* ---------- Why (3 value cards) ---------- */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--bh-space-30);
  max-width: 1260px; margin: var(--bh-space-40) auto 0;
}
.why-card {
  background: var(--bh-white); border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  padding: 28px; min-height: 210px;
}
.why-icon { width: 52px; height: 52px; object-fit: contain; }
.why-title {
  font-family: var(--bh-font-body); font-weight: var(--bh-w-bold);
  font-size: 22px; letter-spacing: 0; color: var(--bh-ink);
  margin-top: var(--bh-space-20);
}
.why-desc { font-size: 15px; line-height: 24px; margin-top: var(--bh-space-8); }
@media (max-width: 1023px) {
  .why-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-16); }
  .why-card { padding: var(--bh-space-20); min-height: 0; }
  .why-icon { width: 48px; height: 48px; }
  .why-title { font-family: var(--bh-font-display); font-weight: var(--bh-w-black); font-size: 19px; margin-top: var(--bh-space-12); }
  .why-desc { font-size: 16px; line-height: 1.44; }
}

/* ---------- What it does — 3-col variant with bullets ---------- */
.what-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--bh-space-20);
  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: 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.what-icon { width: 52px; height: 52px; object-fit: contain; }
.what-title {
  font-family: var(--bh-font-body); font-weight: var(--bh-w-bold);
  font-size: 21px; letter-spacing: 0; color: var(--bh-ink);
  margin-top: var(--bh-space-16);
}
.what-desc { font-size: 15px; line-height: 24px; margin-top: var(--bh-space-16); }
@media (max-width: 1023px) {
  .what-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-16); }
  .what-card { padding: 28px var(--bh-space-24); }
}
.what--calc .what-grid { grid-template-columns: repeat(3, 1fr); }
.what--calc .tool-bullets { margin-top: var(--bh-space-16); width: 100%; text-align: left; }
@media (max-width: 1023px) { .what--calc .what-grid { grid-template-columns: 1fr; } }

/* ---------- Bigger picture (tool cards) ---------- */
.bigger-h2 { font-size: 52px; letter-spacing: -1.8px; }
.bigger-sub { font-size: 18px; line-height: 28px; max-width: 760px; }
.bigger-sub a {
  color: var(--bh-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--bh-dur-fast) var(--bh-ease);
}
.bigger-sub a:hover { color: var(--bh-accent-deep); }
.tool-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--bh-space-40);
  max-width: 1300px; margin: 47px auto 0;
}
.tool-grid--included { margin-top: var(--bh-space-60); }
.tool-card {
  background: var(--bh-white);
  border: 1px solid var(--bh-border-pill); border-radius: var(--bh-r-16);
  box-shadow: var(--bh-shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.tool-img { width: 100%; height: 270px; object-fit: cover; }
.tool-content { padding: 26px 34px 34px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.tool-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 var(--bh-space-12);
  line-height: 26px;
  border-radius: var(--bh-r-8);
  font-size: 11px; font-weight: var(--bh-w-xbold); letter-spacing: 0.5px;
}
.tool-pill--included { background: var(--bh-white); border: 1.5px solid var(--bh-accent); color: var(--bh-accent); }
.tool-pill--plan { background: var(--bh-accent); color: var(--bh-white); border: 1.5px solid var(--bh-accent); }
.tool-title {
  font-size: 27px; letter-spacing: 0; color: var(--bh-ink);
  margin-top: 14px;
}
.tool-desc { font-size: 16px; line-height: 22px; margin-top: 14px; }
.tool-bullets { margin-top: 14px; }
.tool-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 16px; color: var(--bh-ink); line-height: 21px;
}
.tool-bullets li + li { margin-top: var(--bh-space-12); }
.tool-check {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bh-accent); color: var(--bh-white);
  font-size: 12px; font-weight: var(--bh-w-bold);
}
.tool-btn { margin-top: 38px; height: 51px; padding-inline: var(--bh-space-32); font-size: 16px; }
@media (max-width: 1023px) {
  .bigger-h2 { font-size: 26px; letter-spacing: -0.5px; }
  .bigger-sub { font-size: 16px; line-height: 1.4; }
  .tool-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-20); }
  .tool-grid--included { margin-top: var(--bh-space-20); }
  .tool-img { height: 147px; }
  .tool-content { padding: 26px 34px 34px; }
  .tool-title { font-size: 22px; }
  .tool-desc { font-size: 16px; line-height: 1.38; margin-top: var(--bh-space-12); }
  .tool-bullets { margin-top: var(--bh-space-12); }
  .tool-btn { margin-top: var(--bh-space-24); height: 46px; font-size: 15px; }
}

/* ---------- Testimonials (single quote) ---------- */
.testi-slide { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: var(--bh-space-30) 0; }
.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); }
@media (max-width: 767px) {
  .testi-slide { padding: 26px var(--bh-space-24) 0; }
  .testi-quote { font-family: var(--bh-font-body); font-weight: var(--bh-w-medium); font-size: 16px; line-height: 1.5; }
  .testi-quote::before { content: '"'; }
  .testi-quote::after { content: '"'; }
  .testi-caption { margin-top: var(--bh-space-20); }
  .testi-avatar { width: 46px; height: 46px; }
  .testi-name { font-size: 15px; margin-top: var(--bh-space-8); }
  .testi-role { font-size: 13px; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 1000px; margin: var(--bh-space-32) auto 0; }
.faq .bh-acc-item { border-color: #E5E8EE; }
.faq .bh-acc-item + .bh-acc-item { margin-top: 14px; }
.faq .bh-acc-item.is-open { border-color: #E5E8EE; box-shadow: var(--bh-shadow-card); }
.faq .bh-acc-toggle { padding: var(--bh-space-20) var(--bh-space-24) var(--bh-space-20) 28px; }
.faq .bh-acc-glyph { width: 30px; height: 30px; background: transparent; font-size: 0; }
.faq .bh-acc-glyph::before { content: '+'; font-size: 18px; }
.faq .bh-acc-item.is-open .bh-acc-glyph { background: var(--bh-accent); color: var(--bh-white); transform: none; }
.faq .bh-acc-item.is-open .bh-acc-glyph::before { content: '−'; }
.faq .bh-acc-body > * { padding: 0 60px var(--bh-space-24) 28px; font-size: var(--bh-fs-body); line-height: 1.45; }
@media (max-width: 767px) {
  .faq-list { margin-top: var(--bh-space-16); }
  .faq .bh-acc-item + .bh-acc-item { margin-top: var(--bh-space-16); }
  .faq .bh-acc-toggle { padding: var(--bh-space-16) var(--bh-space-16) var(--bh-space-16) var(--bh-space-20); font-size: 16px; }
  .faq .bh-acc-glyph { width: 26px; height: 26px; }
  .faq .bh-acc-body > * { padding: 0 var(--bh-space-20) var(--bh-space-20); font-size: 16px; }
}

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative; overflow: hidden; border-radius: var(--bh-r-16);
  min-height: 560px;
  background: linear-gradient(90deg, #053A2D 0%, #0A6952 50%, var(--bh-green) 100%);
  box-shadow: var(--bh-shadow-lift);
  display: flex; align-items: center;
}
.cta-copy { position: relative; z-index: 1; max-width: min(700px, 54%); padding: var(--bh-space-60) 72px; }
.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: 0; top: 0; height: 100%; max-width: 44%; overflow: hidden; }
.cta-photo img { height: 100%; width: 100%; object-fit: cover; object-position: center right; }
@media (max-width: 1023px) {
  .cta-banner {
    min-height: 400px; border-radius: var(--bh-r-16);
    background: linear-gradient(131.2deg, #053A2D 0%, #0A6952 50%, var(--bh-green) 100%);
    align-items: flex-start;
  }
  .cta-copy { padding: var(--bh-space-40) var(--bh-space-24); max-width: 100%; }
  .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-16); }
  .cta-btn { margin-top: var(--bh-space-16); min-width: 143px; height: 46px; font-size: 15px; }
  .cta-photo { top: auto; bottom: 0; height: 218px; width: 61.4%; max-width: 215px; }
  .cta-photo img { height: 218px; width: 100%; object-fit: contain; object-position: bottom right; }
}

/* ---------- Footer page-level tweaks (copied 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); }
.bh-footer-social a { display: inline-flex; align-items: flex-end; }
.bh-footer-social img { display: block; }
.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) === */
@media (min-width: 700px) and (max-width: 1023px) {
  .cta-copy { max-width: 62%; }
}

/* === Review recordings 2026-09-13 (Lior, mobile) =========================================
   T20 - hero spacing on phones. Measured at 390: 64px between eyebrow, headline, body and
   calculator where every other tool hero has 16px - the desktop grid's 48px column gap
   (.hero-inner--calc) kept applying once the hero became a flex column - and 78px / 50px
   around the pills. */
@media (max-width: 767px) {
  .hero-inner--calc { gap: 0; }
  .hero-inner--calc .calc-card { margin-top: var(--bh-space-24); }
  .hero-inner--calc .hero-chips { margin-top: var(--bh-space-24); }
  .hero-inner--calc .hero-cta-row { margin-top: var(--bh-space-16); }
}
/* T22 - How to break the ceiling: icon, title and description were centred over left-aligned
   bullets. Everything left-aligned, like the Super BDM cards. */
.what--calc .what-card { text-align: left; align-items: flex-start; }
/* T20 - the eyebrow reads "GROWTH CALCULATOR" on phones so it holds one line like every other
   hero eyebrow; desktop keeps the full phrase (Lior's choice, 2026-09-13). */
@media (max-width: 767px) {
  .hero-eyebrow-lead { display: none; }
}
/* T23 - the Super PM card wears Super PM pink (pill, checks, button), as on Investor Dashboard. */
.tool-card--pm { --bh-accent: var(--bh-pink); --bh-accent-dark: var(--bh-pink-deep); }