/**
 * home2.css — Home-2 pixel-parity overlay (body.layout-home-2 scope only).
 *
 * Fix surface: Home-2 featured view (item-150, tsid=33, acm modules 340-345).
 * All rules scoped to body.layout-home-2 so this file cannot affect any other page.
 * No shared scss recompile needed. Loaded via addCustomTag in index.php (filemtime cache-bust).
 *
 * DEFECTS FIXED:
 *  H2-D1 [HARDCODED-DARK-HEX-IN-LIGHT] shero-trust-t uses var(--color-text-meta, #6B7196)
 *         fallback → dark hex #6B7196 leaks into light (should be #888EA6 = $text-dim light).
 *         Fix: use var(--color-text-dim) which is already token-correct both modes.
 *  H2-D2 [OFF-BY-PX] Bento eyebrow: 12px / ls 1.44 → .pen 12.5px / ls 1.2.
 *  H2-D3 [OFF-BY-PX] Pricing eyebrow: same shared .eyebrow rule → 12px / ls 1.44.
 *         .pen HOME-2 eyebrows (Bento "THE PLATFORM" + Pricing "PRICING") = 12.5px / ls 1.2.
 *  H2-D4 [HARDCODED-DARK-HEX-IN-LIGHT] quote-role uses var(--color-text-meta, #6B7196)
 *         → dark #6B7196 leaks into light (should be #888EA6). Fix: var(--color-text-dim).
 *  H2-D5 [OFF-BY-PX] Hero visual (has-img variant) renders at image natural height (~344px).
 *         .pen specifies Visual height = 420px. Enforce min-height 420px on .shero-visual.has-img.
 *  H2-D6 [HARDCODED-DARK-HEX-IN-LIGHT] price-period (/mo label) uses same fallback.
 *         Fix: var(--color-text-dim).
 *  H2-D7 [OFF-BY-PX] shero-stat-l (mobile stat label) uses same var(--color-text-meta,#6B7196).
 *         Fix: var(--color-text-dim).
 */

/* ---- H2-D1: Hero trust text — token leak in light ---- */
body.layout-home-2 .shero-trust-t {
  color: var(--color-text-dim);
}

/* ---- H2-D2: Bento eyebrow — 12.5px / ls 1.2 per .pen node qtgcc ---- */
body.layout-home-2 .acm-bento .eyebrow {
  font-size: 12.5px;
  letter-spacing: 1.2px;
}

/* ---- H2-D3: Pricing eyebrow — 12.5px / ls 1.2 per .pen node dQLb9 ---- */
body.layout-home-2 .acm-pricing .eyebrow {
  font-size: 12.5px;
  letter-spacing: 1.2px;
}

/* ---- H2-D4: Quote author role — token leak in light ---- */
body.layout-home-2 .quote-role {
  color: var(--color-text-dim);
}

/* ---- H2-D5: Hero visual min-height — .pen Visual height=420px ---- */
/*
 * The .shero-visual.has-img variant drops the fixed 420px height (to avoid distorting
 * the image). But .pen explicitly sets height:420 on the Visual panel. Enforce
 * min-height so the image never collapses below the designed panel height.
 * On desktop the image is naturally ≈344px; wrapping in a 420px min-height box
 * with the existing box-shadow keeps the proportions correct.
 */
@media (min-width: 992px) {
  /* The .pen "Visual" panel IS the dashboard screenshot itself (app-agents.png is now
     cropped tight to the card — no baked padding/shadow). Let the wrapper hug the image
     instead of forcing a 420px box, which used to leave the dark card floating inside a
     pale panel. The wrapper's 16px radius + glow shadow now frame the card edge-to-edge. */
  body.layout-home-2 .shero-visual.has-img {
    min-height: 0;
  }
  body.layout-home-2 .shero-visual.has-img .shero-visual-img {
    border-radius: 16px;
  }
}

/* ---- H2-D6: Pricing /mo period label — token leak in light ---- */
body.layout-home-2 .acm-pricing .price-period {
  color: var(--color-text-dim);
}

/* ---- H2-D7: Mobile stat label — token leak in light ---- */
body.layout-home-2 .shero-stat-l {
  color: var(--color-text-dim);
}