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

/* ============================================================
   V5 - Security section cards (super-pm / super-crm / super-bdm /
   super-broker). Lior's baseline = Super PM: card height follows its
   content ("minimal blank space below the description").
   The 4 pages ship 4 divergent studio implementations:
   - super-crm + super-bdm: min-height 360px floors -> 91-120px of dead
     air below the description (Lior's "too much blank space").
   - super-broker (.sec-* dialect): min-height 385px, .sec-title
     min-height 56px reserves a 2-line box for 1-line titles -> the
     "extra spacing between headline and description"; also 24px title,
     17px/28px desc, 38/34 padding, 68px icon.
   - super-bdm adds a 1px border no other page has.
   Convergence target = Super PM's measured spec: no min-height,
   padding 36px 32px, no border, 64px icon, 22px/700 title mt-28,
   16px desc at the body line-height, mt-12.
   Selectors carry (0,1,1)+ specificity so they beat the page rules
   incl. super-crm's `.security-card h3/p` mobile band and the
   per-page media overrides (this file loads last, so equal-or-higher
   specificity wins at every width - mobile converges on PM too). */
.security-card,
.sec-card {
  min-height: 0;
  padding: 36px 32px;
  border: 0;
}
.security-card img,
.sec-card .sec-icon {
  width: auto;
  height: 64px;
}
.security-card h3,
.sec-card .sec-title {
  font-family: var(--bh-font-body);
  font-size: 22px;
  font-weight: var(--bh-w-bold);
  letter-spacing: 0;
  min-height: 0;
  margin-top: 28px;
}
.security-card p,
.sec-card .sec-desc {
  font-size: 16px;
  line-height: var(--bh-lh-body);
  margin-top: 12px;
}

/* ============================================================
   V6 - plan/included/add-on pills on the "bigger picture" and
   "add-on" product cards (super-pm, super-bdm, investor-dashboard,
   asset-management, lead-finder, property-analyzer + super-broker's
   advisory card).
   Root cause of "text too big/bold": base.css W15/D10 floors
   `body .tool-pill, body .adv-pill { font-size: max(12px, 1em) }`.
   That selector (0,1,1) out-specifies every page's `.tool-pill`
   (0,1,0) 11px rule, and `1em` resolves to the PARENT'S size - the
   15.5px body - so every pill rendered 15.5px/800 instead of 11px.
   Root cause of unequal heights: super-pm's pill has no fixed height
   (padding 5px 12px, display block -> 36px rendered) while the other
   5 pages use the deliberately measured fixed-26px spec (see the
   cap-centering comment in investor-dashboard.css).
   Normalized spec = the majority/measured one: 26px box, line-height
   26px, padding 0 12px, r-8 - at 12px, the studio's own D10 floor for
   these labels (page spec is 11px; 12px is the closest the floor
   allows). Weight: Lior answered the pills-comparison.md open question
   on 2026-08-28 - "go for lighter bold" - so every card pill (plan /
   included / add-on + the advisory ADD-ON pill) is 700, overriding the
   pages' --bh-w-xbold (800). */
body .tool-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 12px;
  line-height: 26px;
  border-radius: var(--bh-r-8);
  font-size: 12px;
  font-weight: var(--bh-w-bold); /* 700 - Lior: "lighter bold" (was 800) */
  letter-spacing: 0.5px;
}
/* The advisory ADD-ON pill keeps its own larger design (32px box on the
   gradient header); only the D10-bug font size is repaired: 13px was the
   page spec (11px floored to 12px in the mobile band). */
body .adv-pill {
  font-size: 13px;
  font-weight: var(--bh-w-bold); /* 700 - Lior: "lighter bold" (was 800) */
}
@media (max-width: 767px) {
  body .adv-pill {
    font-size: 12px;
  }
}

/* ============================================================
   ADVISORY - pricing rebuilt to Jeff's engagement model
   (Lior 2026-09-09; Figma 13337:8015 desktop / 13338:8015 mobile)
   ============================================================
   Six engagements in three labelled pairs, replacing three retainers plus two
   add-ons. The generated advisory.css still owns .plan-card/.plan-feats/.plan-cta
   and the navy .guarantee band, so only the new pieces live here: the two-up grid,
   the engagement shape that sits where .plan-price used to, the group labels and
   the TERMS band. .adv-terms rides on .guarantee deliberately - it reuses that
   section's navy surface rather than introducing a page-only colour. */
body .plan-grid--pair {
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--bh-space-16);
}
/* the engagement shape ("Fixed engagement - 3 weeks") replaces the price line:
   body font, secondary colour, so it reads as a qualifier and not as a figure */
body .plan-shape {
  font-family: var(--bh-font-body);
  font-weight: var(--bh-w-medium);
  font-size: 16px;
  line-height: 22px;
  color: var(--bh-body);
  margin-top: 9px;
}
/* .addon-label already carries the blue uppercase label treatment; the group
   variant only needs the rhythm between one pair and the next */
body .adv-group {
  margin-top: var(--bh-space-40);
}
body .bh-section-header + .adv-group {
  margin-top: 50px;
}
body .adv-terms {
  display: block;
  margin-top: var(--bh-space-40);
  padding: var(--bh-space-32) var(--bh-space-40);
}
body .adv-terms-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);
}
body .adv-terms-body {
  font-size: 14px;
  line-height: 22px;
  color: var(--bh-white);
  margin-top: var(--bh-space-12);
}
/* The six cards carry more copy than the three retainers did, and the pair grid
   is narrower than the old three-up, so the min-height that kept the old cards
   even now only adds dead space. Let them size to content and stay even by row. */
body .plan-grid--pair .plan-card {
  min-height: 0;
}
/* .plan-cta pins itself with margin-top:auto, which only produces a gap while the
   card has slack. The old three-up cards got that slack free from min-height:384px;
   these size to content, so auto resolved to 0 and the button sat flush against the
   last bullet - descenders touching the fill. The list owns the gap instead, so it
   holds whether or not the row stretches. */
body .plan-grid--pair .plan-feats {
  padding-bottom: var(--bh-space-24);
}
@media (max-width: 900px) {
  body .plan-grid--pair {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  body .adv-group {
    margin-top: var(--bh-space-32);
    text-align: left;
  }
  body .bh-section-header + .adv-group {
    margin-top: var(--bh-space-24);
  }
  body .plan-shape {
    font-size: 14px;
    line-height: 19px;
    margin-top: var(--bh-space-8);
  }
  body .adv-terms {
    margin-top: var(--bh-space-24);
    padding: var(--bh-space-24);
  }
  body .adv-terms-body {
    font-size: 13px;
    line-height: 20px;
  }
}