/* ==========================================================================
   ANewLog — About / Security page bodies (Phase D2)
   Ported from REFERENCE/APPROVED-PROTOTYPE/about.html and security.html's
   inline <style> blocks. Enqueued only on those two pages
   (functions.php: is_page(['about','security']) gate). Depends on
   design-tokens.css/global.css/chrome.css already being enqueued (.page-hero,
   .eyebrow, .container, .section--dark, .btn, hairline are already ported
   there from Phase B/C).
   ========================================================================== */

/* -------------------------------- About: Mission ----------------------------- */
.mission-statement{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--ink-strong);
  max-width: 18ch;
}
.mission-statement em{ font-style: italic; color: var(--anl-blue); }

/* ------------------------- About: Why We're Building -------------------------- */
.why-grid{ display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px){ .why-grid{ grid-template-columns: 1fr 0.8fr; gap: var(--sp-7); } }
.why-figure{ justify-self: center; width: min(360px, 90vw); }

/* --------------------------- About: Our Principles ---------------------------- */
.principles-list{ display: flex; flex-direction: column; counter-reset: principlenum; }
.principles-list li{
  display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid #343B3E;
  counter-increment: principlenum;
}
.principles-list li:first-child{ border-top: 1px solid #343B3E; }
.principles-index{ font-size: 1.5rem; color: #7E929B; font-weight: 500; }
.principles-index::before{
  content: counter(principlenum, decimal-leading-zero);
  white-space: nowrap; /* same two-digit-wrap fix as .architecture-list/.problem-list */
}

/* ----------------------------- Shared: CTA strip ------------------------------ */
.cta-strip{ flex-wrap: wrap; gap: var(--sp-4); padding-block: var(--sp-3); }

/* --------------------------- Security: hero + lock ----------------------------- */
.security-hero-grid{ display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 860px){ .security-hero-grid{ grid-template-columns: 1.2fr 0.8fr; } }
.lock-figure{ justify-self: center; width: min(220px, 60vw); }

/* ----------------------- Security: Architecture Overview ----------------------- */
.architecture-grid{ display: grid; gap: var(--sp-7); }
@media (min-width: 900px){ .architecture-grid{ grid-template-columns: 1fr 0.85fr; align-items: start; } }
.architecture-list{ display: flex; flex-direction: column; counter-reset: archnum; }
.architecture-list li{
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--line);
  color: var(--anl-dark-grey); font-size: 1.0625rem;
  counter-increment: archnum;
}
.architecture-list li:first-child{ border-top: 1px solid var(--line); }
.architecture-list li::before{
  content: counter(archnum, decimal-leading-zero);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--anl-link); font-size: 0.8125rem;
  white-space: nowrap; /* prevents the two-digit counter from line-wrapping between digits at narrow widths -- same fix as .problem-list in home.css */
  flex-shrink: 0;
}
.stack-figure{ justify-self: center; width: min(280px, 80vw); }

/* ------------------------ Security: Privacy Commitment ------------------------- */
.commitment-list{ display: flex; flex-direction: column; gap: var(--sp-3); max-width: 46ch; }
.commitment-list li{ display: flex; align-items: center; gap: var(--sp-3); font-size: 1.125rem; }
.check-mark{ width: 22px; height: 22px; flex: none; }

/* --------------------------------- Responsive ----------------------------------- */
@media (max-width: 719px){
  .principles-list li{ grid-template-columns: 40px 1fr; }
}