/* ============================================================
 * EVO TrustGuard — static content-page CSS (page-static.css)
 *
 * Owner:        /css/AGENTS.md (page-CSS naming under LOCKED C57 §2)
 * Cascade:      after /css/tokens.css + /css/base.css + /css/page-index.css.
 *               The /index.html sales-page chrome (nav, footer, brand SVG
 *               fills, button styles) is reused verbatim on these pages by
 *               loading page-index.css ahead of this file. This file adds
 *               only the prose-content rules the sales-page CSS does not
 *               cover (bare h1/h2 typography, article container, closing
 *               callout treatment, mailto/tel link styling).
 * Edit policy:  page-specific rules only. Two-page surface: /about.html
 *               and /contact.html. Promote recurring values into
 *               /css/tokens.css before reuse.
 *
 * Authorship:
 *   - C69 polish sprint: created to back the new About + Contact pages.
 *     Marketing.css's existing typography rules are scoped to the seeker
 *     intake page (.hero h1, section h2, .form-card h2, etc.) and do not
 *     apply to bare article markup. Disclosed as a Workflow Rule 22
 *     deviation in the sprint report — a separate file is justified
 *     because cramming prose styles into the homepage CSS would bloat
 *     the index.html bundle for rules that page never uses.
 * ============================================================ */

/* C69-I two-tone dark conversion: about/contact are single-tone deepest
   (var(--bg) inherited from base.css). The closing callout uses a red-
   tinted near-black accent on dark instead of the prior light-pink wash.
   All dark-mode-only literals match the page-index.css palette so the
   nav + footer + body share one continuous dark surface. */

/* ── Article container ───────────────────────────────────────── */
.static-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 96px 40px 120px;
  color: #f5f5f5;
}

.static-article h1 {
  font-family: var(--font-sans);
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #f5f5f5;
  margin-bottom: var(--space-7);
  text-wrap: balance;
}

.static-article h2 {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #f5f5f5;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.static-article h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: #f5f5f5;
  margin-top: var(--space-7);
  margin-bottom: var(--space-2);
  letter-spacing: -0.005em;
}

.static-article p {
  font-size: 17px;
  line-height: 1.65;
  color: #aaa;
  margin-bottom: var(--space-5);
  text-wrap: pretty;
}

.static-article p:last-child { margin-bottom: 0; }

.static-article a {
  color: var(--red);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .15s, color .15s;
}
.static-article a:hover {
  color: var(--red-hover);
  border-bottom-color: currentColor;
}

.static-article hr {
  border: 0;
  border-top: 1px solid var(--marketing-border);
  margin: var(--space-8) 0;
}

.static-article .lead {
  font-size: 19px;
  line-height: 1.55;
  color: #f5f5f5;
}

/* Address block at the bottom of /contact.html — italic, muted, stacked. */
.static-article .static-address {
  font-style: italic;
  color: #aaa;
  margin-bottom: 0;
}
.static-article .static-address span {
  display: block;
}

/* ── Contact methods (key/value blocks) ─────────────────────── */
.contact-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin: var(--space-8) 0;
}
.contact-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.contact-block .contact-label {
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  color: #aaa;
}
.contact-block .contact-value {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  color: #f5f5f5;
  letter-spacing: -0.005em;
}
.contact-block .contact-value a {
  color: #f5f5f5;
  border-bottom: 1px solid var(--marketing-border);
}
.contact-block .contact-value a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* ── Closing callout (about.html final line) ────────────────── */
.static-callout {
  margin-top: var(--space-10);
  padding: var(--space-7) var(--space-7);
  background: rgba(229,52,46,.08);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-md);
}
.static-callout p {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  color: #f5f5f5;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .static-article { padding: 64px 22px 88px; }
  .static-article h1 { font-size: 34px; }
  .static-article h2 { font-size: 22px; margin-top: var(--space-7); }
  .static-article h3 { font-size: 17px; }
  .static-article p { font-size: 16px; }
  .contact-block .contact-value { font-size: 19px; }
  .static-callout p { font-size: 19px; }
}