/* ============================================================
 * EVO TrustGuard: feature-page CSS (page-feature.css)
 *
 * Owner:        /css/AGENTS.md (page-CSS naming under LOCKED C57 §2;
 *               the "Feature pages" section holds the template contract)
 * Cascade:      after /css/tokens.css + /css/base.css +
 *               /css/_lib/dropdown.css + /css/page-index.css. The public
 *               chrome (header, kebab, hero band, sections, eyebrows,
 *               .lm-points, the phone frame, FAQ rows, final CTA, footer,
 *               .hp-link, .hp-head-tight, .shot-phone / .shot-img) comes
 *               from page-index.css. This file adds ONLY the layout the
 *               feature pages need that page-index.css does not have.
 * Edit policy:  family-specific layout only, every class prefixed .fp-*.
 *               A rule one feature page needs and the others do not still
 *               goes here under .fp-*; do not create a sheet per feature
 *               page. Promote recurring values into /css/tokens.css
 *               before reuse.
 *
 * ONE FILE FOR A PAGE FAMILY (Workflow Rule 22 disclosure). LOCKED C57 §2
 * names page CSS page-<name>.css, one file per page. This file serves a
 * FAMILY of pages instead: the eight feature pages, of which
 * /security-guard-crm.html is the first and the template (SALES-PAGE1,
 * C179; the others SALES-PAGE2, C179). The precedent is /css/page-static.css, which serves /about.html
 * and /contact.html for the same reason: the pages share one layout, and
 * eight near-identical sheets would drift. The eight pages and their
 * addresses are listed in /css/AGENTS.md.
 *
 * Light-pin rule (/css/AGENTS.md, Marketing pages): feature pages pin
 * data-theme="light" on <html> and render dark, so every surface value
 * here is a theme-STABLE --marketing-* alias or a literal page-index.css
 * already uses (#f5f5f5, #aaa). Never --tier*, --glass-*, --hairline,
 * --edge-highlight, --text or --red in this file. Radii are rectangular
 * (LOCKED C68-B-1A.6-A). The spacing ladder has no --space-9, 11, 13, 15,
 * 17 or 19.
 *
 * Authorship:
 *   - SALES-PAGE1 (C179): created with the first feature page.
 *   - SALES-PAGE2 (C179): .fp-hero-plan for the plan line under the hero.
 * ============================================================ */

/* ── Hero button ───────────────────────────────────────────────
   The compact hero is page-index.css's .hero.hero-band (centered copy on
   the dot grid). The band on /pricing.html has no button; a feature page
   has one, under the sub. The wrapper is a centered flex row so the
   .btn-primary anchor is a flex item, not an inline box: an inline anchor
   keeps its vertical padding out of the line layout (the gap above it
   would read short) and takes no transform (no press feedback). Same
   reason the homepage hero wraps its button in the flex .hero-ctas. */
.fp-hero-cta { margin-top: var(--space-7); display: flex; justify-content: center; }
/* The one line under the hero button that says which plan the page's
   subject needs. Muted, centered by the band, reading measure. */
.fp-hero-plan {
  max-width: 560px; margin: var(--space-4-5) auto 0;
  font-size: var(--text-md); line-height: 1.5; color: #aaa;
  text-wrap: pretty;
}

/* ── "How it works" blocks ─────────────────────────────────────
   One block per thing the owner does: copy beside a phone-framed
   screenshot, sides alternating down the page, stacked (copy first) at
   860px and below, the same breakpoint as page-index.css's .lm-grid.
   The numeral is page-index.css's .lm-point-num; the frame is
   .lm-phone.shot-phone with a .shot-img inside. */
.fp-blocks {
  display: flex; flex-direction: column;
  gap: var(--space-18);
}
.fp-block {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.fp-block:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.fp-block:nth-child(even) .fp-block-visual { order: -1; }
.fp-block-copy .lm-point-num { margin-bottom: var(--space-4-5); }
.fp-block-copy h3 {
  font-family: var(--font-sans);
  font-size: 26px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.fp-block-copy p {
  font-size: 17px; color: #aaa; line-height: 1.6;
  max-width: 540px;
  text-wrap: pretty;
}
.fp-block-visual { display: flex; justify-content: center; }
.fp-block-visual .lm-phone { width: 240px; }

/* ── Deep-dive points ──────────────────────────────────────────
   A modifier on page-index.css's .lm-points for the feature's deep-dive
   section. Without it the four paragraphs run the full 1100px container
   (about 150 characters a line at desktop widths); this keeps them at
   the reading measure the rest of the page uses. */
.fp-points { max-width: 760px; }

/* ── Related links row ─────────────────────────────────────────
   Two or three pressable Tier-1 cards (the .solution-card recipe, with
   its hover lift, because these ARE links). Only link to pages that
   exist: tools/build-site.test.js fails on an unresolved href. */
.fp-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
  max-width: 820px;
}
.fp-related-link {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-1-5);
  min-height: 44px;
  padding: var(--space-5) var(--space-5-5);
  background: var(--marketing-tier1-bg);
  border: 1px solid var(--marketing-hairline);
  border-radius: var(--radius-2xl);
  box-shadow: var(--marketing-shadow-float);
  transition: border-color .15s, transform .18s var(--ease-spring);
}
.fp-related-link::before {
  content: ""; position: absolute; top: 0; left: 14px; right: 14px;
  height: 1px; background: linear-gradient(90deg, transparent, var(--marketing-edge-highlight), transparent);
  pointer-events: none;
}
.fp-related-link:hover { border-color: #3a3a3a; transform: translateY(-2px); }
.fp-related-link:active { transform: scale(var(--press-scale)); }
.fp-related-link:focus-visible {
  outline: 2px solid var(--marketing-red-accent);
  outline-offset: 2px;
}
.fp-related-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #f5f5f5; }
.fp-related-sub { font-size: var(--text-base); color: #aaa; line-height: 1.5; }

@media (max-width: 860px) {
  .fp-blocks { gap: var(--space-14); }
  .fp-block,
  .fp-block:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-7); }
  .fp-block:nth-child(even) .fp-block-visual { order: 0; }
  .fp-block-copy h3 { font-size: 22px; }
  .fp-block-visual .lm-phone { width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-related-link { transition: none; }
}