/* Lior video-review fixes (docs/reviews/2026-08-28-lior-video-review.md) - misc stream.
   Loads AFTER the generated page.css; survives port-page.mjs regeneration. */

/* V9 - /lead-magnet/: the contact form card was pinned to the top of the white
   column (lead-magnet.css: .offer-form-col padding-top 90px + .form-card
   align-self flex-start), leaving a big gap above and none below. Center it
   DYNAMICALLY on both axes regardless of the card's or the left column's
   height. Scoped >=1024px: below that the offer card stacks to one column and
   the column padding is already 0 (card is full-bleed). */
@media (min-width: 1024px) {
  .offer-form-col {
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .offer-form-col .form-card {
    align-self: auto;
  }
}

/* D30 (2026-08-30, Lior + Sagi call): remove the blurred pink halo on the
   guide-card thumb (lead-magnet.css .form-thumb::after, desktop + mobile).
   Lior's standing rule: no big blurry pink glow blobs. Arrows and light-page
   grain were BLESSED in the same call - no overrides needed for those. */
.form-thumb::after {
  display: none;
}

/* Lior, 2026-08-30: a FIFTH feature block on /super-crm/ - "Connect Your AI" - joining
   Zero Migration, Instant Setup, No Limits and Contact Enrichment below the product video.
   The block reuses the .feat family wholesale, so all it needs from CSS is the section
   spacing the other four get by id. Those two rules live in the generated page.css, which
   is copied verbatim from the studio, so the new id is added here instead.
   The breakpoints mirror the studio's exactly - min-width 768 and max-width 767, NOT
   min-width 1024, or the block would lose its top margin across the whole tablet band. */
@media (min-width: 768px) {
  #connect-your-ai {
    margin-top: 80px;
  }
}
@media (max-width: 767px) {
  #connect-your-ai {
    margin-top: 80px;
  }
}

/* Home steps: while a .step reveals it carries a transform, which makes it a stacking
   context painted under the timeline's drawn line. Keep the numbers above the line always. */
.steps-timeline::before,
.steps-timeline::after {
  z-index: 0;
}
.step {
  z-index: 1;
}

/* Home testimonials: the studio filled the "next" arrow with the accent, which reads as an
   active state (Sagi 2026-09-05). Both arrows rest neutral and fill on hover/focus. */
@media (min-width: 768px) {
  .testi-arrow--next {
    background: var(--bh-white);
    border: 1px solid var(--bh-border);
    color: var(--bh-ink);
  }
  .testi-arrow:hover,
  .testi-arrow:focus-visible {
    background: var(--bh-accent);
    border-color: var(--bh-accent);
    color: var(--bh-white);
  }
}

/* Miniapp pages: the frame holds its height until the app mounts (no static screenshot any more). */
html.js .tour-frame:not(.is-live) {
  min-height: 36rem;
}
@media (max-width: 767px) {
  html.js .tour-frame:not(.is-live) {
    min-height: 24rem;
  }
}


/* === accordion glyph: exactly one +/- per circle (Lior walkthrough 2026-09-08, T1) ===
   base.css draws the glyph geometrically: ::before is a 2px bar, ::after the same bar
   rotated 90deg, together a "+"; opening hides ::after leaving a "-".

   Seven generated page stylesheets then override ::before's `content` with a TEXT character
   and give it a real font-size, but they never clear the bar's background/width/height and
   never suppress ::after - so the same circle paints a 2px bar AND a typographic glyph at a
   different width. That is Lior's "two minuses, one shorter, one wider" and "one big plus,
   one small plus": super-pm (page-wide), super-broker, asset-management, investor-dashboard,
   lead-finder, property-analyzer, growth-calculator.

   Four more pages (super-crm, faq, pricing, super-bdm) instead ship markup spans
   (.glyph-plus / .glyph-minus / .acc-plus / .acc-minus). Those compute to font-size 0 -
   killed by base.css's `.bh-acc-toggle .bh-acc-glyph * { font-size: 0 }` - so the authored
   character never renders and the geometric bar is what shows. Different defect, same family.

   Those page stylesheets are GENERATED (port-page.mjs:1053), so the fix cannot live in them.
   It lives here, in the hand-owned layer that loads last. base.css's geometric glyph is the
   single source of truth; every typographic glyph is suppressed.

   Specificity note: the page rules are at most (0,2,1) - `.faq .bh-acc-glyph::before`. The
   selectors below match that, and this file loads after, so ties resolve here. */
.bh-accordion .bh-acc-glyph::before,
.bh-accordion .bh-acc-glyph::after {
  content: "" !important;
}
/* the inert markup spans never paint; keep them out of the box model entirely */
.bh-accordion .bh-acc-glyph > .glyph-plus,
.bh-accordion .bh-acc-glyph > .glyph-minus,
.bh-accordion .bh-acc-glyph > .acc-plus,
.bh-accordion .bh-acc-glyph > .acc-minus {
  display: none !important;
}

/* ============================================================
   PRICING - feature-level plan comparison
   (Lior 2026-09-09; Figma 13332:716)
   ============================================================
   The comparison went from one row per product to one row per feature, which
   adds two row types the generated pricing.css has never had: a product
   sub-header inside a band, and a "Coming soon" cell.

   Colour: Lior asked for "Coming soon" in the same colour as the checkmarks.
   In the build .c-yes is var(--bh-ink), so that is what this matches - and it
   has to be, because the design system reserves pink for actions and forbids
   pink text. (The Figma draft's ticks are pink, which is why the draft's
   "Coming soon" is pink there; the rule is "match the ticks", not "be pink".) */
body .c-sub th {
  font-family: var(--bh-font-body);
  font-weight: var(--bh-w-semibold);
  font-size: 12px;
  line-height: 16px;
  color: var(--bh-body);
  text-align: left;
  letter-spacing: 0.3px;
  padding: 14px var(--bh-space-8) 4px;
}
body .c-soon {
  font-weight: var(--bh-w-medium);
  font-size: 11.5px;
  line-height: 17px;
  color: var(--bh-ink);
  white-space: nowrap;
}
@media (max-width: 767px) {
  body .c-sub th {
    font-size: 11px;
    line-height: 14px;
    padding: 11px var(--bh-space-8) 3px;
  }
  body .c-soon {
    font-size: 10px;
  }
}

/* ============================================================
   PRICING - PROOF band, real client wins (Lior 2026-09-09, T14)
   ============================================================
   Lior's wins are longer than the placeholders this band was designed around
   ("40 doors", "$1,000"), so at the studio's 40px the two longest wrapped to a
   second line and the four descriptors stopped sharing a baseline.

   He asked for one line each, closer to the original. Sizes are measured off
   the real strings at each breakpoint, not guessed: the widest stat, "New lead
   channel", needs 316px at the studio's 40px, and the card it has to fit in is
   288px at 1440, 276px at 1280, 264px of usable width on a phone - and only
   204px in the 1024-1279 band, where the grid is still four columns but the
   container has shrunk. That band is the pinch, and it needs its own size.

   Any future win longer than about 17 characters will need this revisited. */
body .proof-stat {
  font-size: 32px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body .proof-stat {
    font-size: 24px;
  }
}

/* The proof band forces every logo to a fixed height and lets width follow the
   aspect, which is fine until a very wide wordmark arrives. Next Step is 6:1, so
   at the band's height it rendered 199px against 110-121px for the other three
   and read as one client shouting. Capping its width to the widest of the others
   lets object-fit letterbox it instead - same visual weight, no distortion. */
body .proof-logo--wide {
  max-width: 121px;
}
@media (max-width: 767px) {
  body .proof-logo--wide {
    max-width: 96px;
  }
}

/* === Home "Live in 10 minutes" underline on every width (review recordings 2026-09-13, T9) ===
   home.css draws the pink scribble under "10 minutes" inside its max-width:767px block
   only, so desktop and tablet never got it. Same asset, scaled to the larger headline. */
@media (min-width: 768px) {
  body .steps-underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 13px;
    /* width-driven, like the phone rule: the SVG keeps its own 131:6 ratio, so a 100% 100%
       box only drew a 153px stroke centred under 'minutes' (measured at 1440) */
    background: url('/assets/home/scribble-underline.svg') no-repeat center / 100% auto;
  }
}

/* === FAQ +/- glyph - one style on every FAQ (review recordings 2026-09-13, T3 + T3a) ===
   Lior: Super CRM's FAQ glyph is the reference, rolled out to every FAQ section and the FAQ
   page - with one change: a CLOSED row shows the plus on its own, no circle; only the OPEN
   row's minus sits in a circle.
   Measured before (puppeteer, natural state): the bars were already base.css's geometric
   46%-of-box glyph everywhere, but the boxes and grounds disagreed - Super CRM and Super BDM
   put the plus on a grey (#F5F7FA) disc, the others on nothing; the open circle was 30px on
   FAQ / Super PM and 26px elsewhere on phones; and on multi-line questions the glyph drifted
   off the row's centre (FAQ +7px, Super Broker +10px desktop, -10px on phones - T3a,
   "How does Super Broker learn my company's voice?").
   Geometry = Super CRM's: 30px box on tablet and up; on phones 20px closed, 26px open.
   The `body` prefix outranks base.css's hover disc and every page's .faq-list rule. */
body .faq-list .bh-acc-toggle .bh-acc-glyph {
  align-self: center;
  margin-block: 0;
  width: 30px;
  height: 30px;
}
body .faq-list .bh-acc-item:not(.is-open) .bh-acc-glyph {
  background: transparent;
  color: var(--bh-ink);
}
body .faq-list .bh-acc-item.is-open .bh-acc-glyph {
  background: var(--bh-accent);
  color: var(--bh-white);
}
@media (max-width: 767px) {
  body .faq-list .bh-acc-item:not(.is-open) .bh-acc-toggle .bh-acc-glyph {
    width: 20px;
    height: 20px;
  }
  body .faq-list .bh-acc-item.is-open .bh-acc-toggle .bh-acc-glyph {
    width: 26px;
    height: 26px;
  }
}

/* === CTA banner - the person never touches the edge, the copy never runs over the person ===
   Review recordings 2026-09-13 (T1, T2, rule R1). Enforced by scripts/qa-cta-banners.mjs,
   which measures the photo's opaque pixels, not the <img> box.
   Measured before: from 768 up the person's head sat 0-2px from the banner's top edge on
   every page - the cut-outs are cropped at the crown and drawn full-height from top:0.
   On phones the copy flowed straight down into the photo's rows (Home body -33px, Super BDM
   -70px, Investor Dashboard -107px at 390), and at 1280 Home's no-wrap headline ran 13px
   into her hair.
   Tablet and up: the photo drops a clear band from the top and scales down with it,
   contained and anchored bottom-right so nothing crops; headlines may wrap.
   Phones (revised after Lior's follow-up, same day): the banner keeps its original height -
   no reserved space under the copy. Instead ctaFit in public/scripts/shared.js sizes the
   person to the room left below the last line of copy, capped at the design size, so no
   line ever shares a row with them. Headline and body use the full width, which keeps the
   copy short and the person as large as possible. */
@media (min-width: 768px) {
  body .cta-banner .cta-photo {
    top: auto;
    bottom: 0;
    height: calc(100% - var(--bh-space-32));
    object-fit: contain;
    object-position: right bottom;
  }
  body .cta-banner .cta-h {
    white-space: normal;
  }
}
@media (max-width: 767px) {
  body .cta-banner .cta-copy {
    max-width: 100%;
  }
  body .cta-banner .cta-h,
  body .cta-banner .cta-body {
    max-width: none;
  }
}

/* === Review recordings 2026-09-13 - page-specific fixes ===================================
   Each rule is scoped to its page by a section id only that page has, because the page
   stylesheets these override are generated and share class names across pages. */

/* T4 - Super CRM hero pills hug their text like every other hero's. Measured at 1440:
   15px left / 9px right on Super CRM, 15px / 15px on Super BDM. */
body:has(#zero-migration) #hero .hero-chip {
  padding: 0 14px;
}
@media (max-width: 767px) {
  body:has(#zero-migration) #hero .hero-chip {
    padding: 0 11px;
  }
}

/* T10 - Home hero on phones: the headline must be the largest thing in the hero. Measured at
   390: pill 14.5px / weight 800 caps, headline 34px, body 18.5px - the caps pill read as big
   as the headline. Headline up to 44px, pill down to 12px, body unchanged (Lior, M 0:11). */
@media (max-width: 767px) {
  /* 40px, not 44: at 44 'Doors' fell onto a line of its own; 40 holds 'Stop Losing Doors' on
     one line at 360-430 */
  body:has(#steps) #hero .hero-h1 {
    font-size: 40px;
    line-height: 1.04;
  }
  /* smaller and tighter, so the pill reads as a label and sits on one line where it fits */
  body:has(#steps) #hero .hero-eyebrow-text,
  body:has(#steps) #hero .bh-pill-eyebrow {
    font-size: 12px;
    letter-spacing: 0.06em;
  }
  body:has(#steps) #hero .bh-pill-eyebrow {
    padding-inline: var(--bh-space-16);
  }
}

/* T11 - Home plans, phones: the Super CRM card's description ran to 5 lines at the shared
   170px measure and landed flush on its Explore button (0px; the other cards 4 lines, 13px).
   A wider measure keeps every card at 4 lines, clear of the figure. Rule R2 - card copy
   never touches its CTA - is checked in scripts/qa-widths.mjs. */
/* The same collision showed at 768 and 1024 once rule R2 measured them (Super CRM card 0px,
   the others 0-11px): the button is pushed down with margin-top:auto, which gives no gap when
   the copy fills the card. A floor under the copy holds at every width. */
body:has(#steps) .plan-body {
  margin-bottom: var(--bh-space-16);
}
@media (max-width: 767px) {
  body:has(#steps) .plan-body {
    max-width: 188px;
  }
}

/* T12 - Super CRM feature cards, phones: the mock was forced to a 166px-tall cover crop,
   which cut the Contact Enrichment astronaut's head and feet and the "Connect your AI" floor
   lettering. Show the whole picture, as desktop does. */
@media (max-width: 767px) {
  body:has(#zero-migration) .feat-mock img {
    height: auto;
    object-fit: contain;
  }
}

/* T14 - Super PM integrations, phones: four tiny tiles per row where every other product page
   (Super BDM is the reference) shows two 73px tiles with 100x30 logos. */
@media (max-width: 767px) {
  body:has(#superpower-1) #integrations ul.int-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--bh-space-12);
    margin-top: var(--bh-space-30);
  }
  body:has(#superpower-1) #integrations .int-chip {
    height: 73px;
    border-radius: var(--bh-r-8);
    border-width: 1px;
  }
  body:has(#superpower-1) #integrations .int-chip img {
    max-width: 100px;
    max-height: 30px;
  }
}

/* T18 - Press awards, phones: the NARPM badge sat 16px under the paragraph above it
   (desktop gives it 53px). */
@media (max-width: 767px) {
  body .awards-badge-row {
    margin-top: var(--bh-space-40);
  }
}

/* T8 - Footer legal links, phones: three of the four broke mid-link ("Terms of / Use").
   A link never breaks inside itself; 12px type with a 12px gap puts all four on one line
   from 375px (measured at 13px / 16px: three fit, Security Policy wrapped); at 360 the last
   link wraps whole. */
@media (max-width: 767px) {
  body .bh-footer-legal {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--bh-space-12);
    row-gap: var(--bh-space-8);
    font-size: 12px;
  }
  body .bh-footer-legal a {
    white-space: nowrap;
    margin: 0;
  }
}

/* T16 - Blanket Advisory, About Jeff, phones: the photo came before the ABOUT eyebrow (the
   W13 width-proof layer turns the grid into a block, so the `order` rules stopped applying)
   and the phone crop put his hair on the frame edge. Eyebrow, headline, photo, body, stats -
   and the photo shown whole at its own ratio. The phone crop itself is swapped for the
   desktop cut-out in port-page.mjs, which has room above the head. */
@media (max-width: 767px) {
  body .about-jeff-inner {
    display: flex;
    flex-direction: column;
  }
  body .about-jeff-copy {
    display: contents;
  }
  body .about-jeff-copy .bh-eyebrow { order: 0; }
  body .about-jeff-pic { order: 2; }
  body .about-jeff-h2 { order: 1; } /* Lior follow-up 2026-09-13: photo below the headline */
  body .about-jeff-body { order: 3; }
  body .about-jeff-copy .stat-row { order: 4; }
  body .about-jeff-img {
    height: auto;
    aspect-ratio: 760 / 876;
    object-fit: contain;
    margin-top: var(--bh-space-16);
  }
}

/* T2a - Home CTA banner, tablet and up: Lior wants "Let it run for you." on its own line.
   home.css hides the authored <br class="cta-break"> from 1024px; show it at every width. */
@media (min-width: 768px) {
  body:has(#steps) .cta-banner .cta-h br.cta-break {
    display: inline;
  }
}

/* CTA banner heights on phones and tablets are locked to the pre-change build (Lior, 2026-09-13:
   fix the overlap "without changing the CTA banner's height"; checked by qa-cta-banners.mjs
   HEIGHTS_BASE). Super Broker's phone banner is 400px like every other (Lior, 2026-09-13: "they
   should all be the same height"). */
/* INCLUDED / ADD-ON card bullets, phones (Lior, 2026-09-13; option A chosen from rendered
   comparisons). Two systems were in play: Super BDM / Super PM centred the check on the text
   block with 11px gaps; the five tool pages lined it up with the first line with 12px gaps and a
   tighter line-height. One system everywhere: 12px between bullets, 1.4 line-height, check
   centred on the bullet's text however many lines it wraps to. */
@media (max-width: 767px) {
  body .tool-bullets {
    display: flex;
    flex-direction: column;
    gap: var(--bh-space-12);
  }
  body .tool-bullets li + li {
    margin-top: 0;
  }
  body .tool-bullets li {
    display: flex;
    align-items: center;
    gap: var(--bh-space-12);
    line-height: 1.4;
  }
  body .tool-bullets .tool-check {
    flex: 0 0 auto;
    margin-top: 0;
  }
}

/* Super Broker CTA banner, tablet (768-1023). The only banner still carrying its desktop type in
   the tablet band - a 52px headline and 72px side padding inside a 46% copy column - so at 768
   the headline broke one or two words per line and the banner grew to 774px while every other
   banner is 400px. Lior chose to fix it to 400px (2026-09-13), the one approved height change.
   Tablet type and padding now match the other banners (Advisory's tablet rules). */
@media (min-width: 768px) and (max-width: 1023px) {
  body:has(#trusted-by):has(#superpower-01) .cta-banner {
    min-height: 400px;
  }
  body:has(#trusted-by):has(#superpower-01) .cta-banner .cta-copy {
    max-width: 52%;
    padding: var(--bh-space-40) var(--bh-space-32);
  }
  body:has(#trusted-by):has(#superpower-01) .cta-banner .cta-h {
    font-size: 30px;
    line-height: 1.04;
    letter-spacing: -0.5px;
  }
  body:has(#trusted-by):has(#superpower-01) .cta-banner .cta-body {
    font-size: 16px;
    line-height: 1.4;
    margin-top: var(--bh-space-16);
  }
  body:has(#trusted-by):has(#superpower-01) .cta-banner .cta-btn {
    margin-top: 26px;
  }
}

/* === Jeff's CTA banners - Super Broker and Blanket Advisory (Lior, 2026-09-13) ===
   Lior: Jeff waist-up, cut right below his folded hands (Figma 9479:5748), at every width; on
   phones the banner is the same 400px as every other; on desktop he sat too far right (18px /
   ~1% from the edge, where Figma has ~6%) - move him left.
   One image for both pages at every width: cta-jeff-hands.webp, cut where the crossed forearms
   end, so anchoring its bottom to the banner's bottom edge IS the crop. Contained, never cropped
   further; the banner's own height is untouched.
   Phones: ctaFit (shared.js) sizes him to the room below the copy; max-width keeps him clear of
   the button column. */
body:has(#trusted-by):has(#superpower-01) .cta-banner .cta-photo,
body:has(#about-jeff) .cta-banner .cta-photo {
  top: auto;
  bottom: 0;
  left: auto;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
}
@media (min-width: 1024px) {
  body:has(#trusted-by):has(#superpower-01) .cta-banner .cta-photo,
  body:has(#about-jeff) .cta-banner .cta-photo {
    height: calc(100% - var(--bh-space-24));
    right: 6%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body:has(#trusted-by):has(#superpower-01) .cta-banner .cta-photo,
  body:has(#about-jeff) .cta-banner .cta-photo {
    height: calc(100% - var(--bh-space-24));
    right: 5%;
  }
}
@media (max-width: 767px) {
  body:has(#trusted-by):has(#superpower-01) .cta-banner,
  body:has(#about-jeff) .cta-banner {
    min-height: 400px;
  }
  body:has(#trusted-by):has(#superpower-01) .cta-banner .cta-photo,
  body:has(#about-jeff) .cta-banner .cta-photo {
    height: 230px;
    max-width: 42%;
    right: var(--bh-space-16);
  }
}

/* === CTA banners at tablet widths, 768-1023 (Lior, 2026-09-13 follow-up) ===
   Measured at 768 / 900 / 1023:
   - every banner's copy was pinned to the top (align-items: flex-start from the phone rules),
     leaving 111-207px empty below it; Lior asked why it is not centred. Centred now.
   - Super PM: the phone rule's `max-width: 342px` on .cta-banner ran all the way to 1023, so the
     tablet banner was a 342px-wide phone card, 476px tall, one word per headline line.
   - Growth Calculator, Lead Finder, Property Analyzer wrap the photo in <picture class="cta-photo">.
     The page rules kept the phone sizing on the wrapper (61.4%, max 215px) and the <img> (218px
     tall), so Growth Calculator's woman sat at the top, cut off at the chest, and on Lead Finder and
     Property Analyzer the photo collapsed to 0x0 and did not show at all. The wrapper now takes the
     same tablet framing as the other banners and the image fills its height. */
@media (min-width: 768px) and (max-width: 1023px) {
  body .cta-banner {
    align-items: center;
  }
  body:has(#superpower-1) .cta-banner {
    max-width: none;
    margin-inline: 0;
    min-height: 400px;
  }
  body .cta-banner picture.cta-photo {
    display: block;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    width: auto;
    max-width: 53%;
    height: calc(100% - var(--bh-space-32));
    overflow: visible;
  }
  body .cta-banner picture.cta-photo img {
    display: block;
    width: auto;
    max-width: none;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
  }
}

/* About - team LinkedIn badges are real links now (2026-09-13): keep the pink disc, no underline. */
body a.member-badge {
  color: var(--bh-white);
  text-decoration: none;
  transition: transform var(--bh-dur-fast) var(--bh-ease);
}
body a.member-badge:hover,
body a.member-badge:focus-visible {
  transform: scale(1.08);
}

/* === CTA headlines at 1024-1279 (Lior, 2026-09-13; tracker F6) ===
   The 52px desktop headline in a 45% column broke into 3-5 lines with words alone on a line
   (Super BDM 5 lines and a 608px banner; Investor Dashboard "owner" alone). Lior approved the fix
   from a today-vs-proposed render and asked for the headline as big as the fix allows. Measured
   40-50px across all 12 pages at 1024 / 1080 / 1152 / 1210 / 1279: 42px is the largest size where
   every headline holds 3 lines or fewer with no word alone on a line and every banner stays 560px
   (44px+ puts Super Broker on 4 lines at 1024). Investor Dashboard's 581px hold, which only
   existed for its old copy, goes: 560px like the rest. */
@media (min-width: 1024px) and (max-width: 1279px) {
  body .cta-banner .cta-h {
    font-size: 42px;
    letter-spacing: -0.8px;
  }
  body .cta-banner .cta-copy {
    max-width: 50%;
  }
}