/* ============================================================
   /aziz-ai/ — "About Aziz AI" page components ("Copper & Ledger")
   Layers on /css/tokens.css + /css/site.css. Typography-and-line
   diagrams only — no imagery. External so the page can run under
   style-src 'self'.
   ============================================================ */

.about-hero { padding: var(--sp-8) 0 var(--sp-6); }
.about-hero .eyebrow { display: block; margin-bottom: var(--sp-4); color: var(--verdigris); }
.about-hero h1 { font-size: var(--text-display-1); max-width: 16ch; }
.about-hero .lede { max-width: var(--measure); color: var(--ink-2); font-size: 1.1rem; }
.about-hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.about-section { padding: var(--sp-7) 0 0; }
.about-section:last-of-type { padding-bottom: var(--sp-8); }
.about-section .section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); border-bottom: var(--hairline);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-5);
}
.about-section h2 { font-size: var(--text-display-2); margin: 0; }
.about-section .measure { max-width: var(--measure); }
.about-section h3 { font-size: var(--text-h3); margin: var(--sp-5) 0 var(--sp-3); }

/* ---------- the systems diagram: typography and hairlines only ---------- */
.flow {
  display: flex; flex-direction: column; gap: 0;
  max-width: 560px; margin: var(--sp-5) 0;
  border-left: 2px solid var(--copper);
}
.flow-step { padding: var(--sp-4) var(--sp-5); border-bottom: var(--hairline); }
.flow-step:last-child { border-bottom: 0; }
.flow-step .step-label {
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: var(--track-mono-label); text-transform: uppercase;
  color: var(--copper-deep); display: block; margin-bottom: var(--sp-1);
}
.flow-step p { margin: 0; font-size: var(--text-small); color: var(--ink-2); max-width: 52ch; }

/* ---------- CV vs APIR comparison ---------- */
.compare { border-top: var(--hairline); max-width: 760px; }
.compare-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
  border-bottom: var(--hairline); padding: var(--sp-4) 0;
}
.compare-row .side-label {
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: var(--track-mono-label); text-transform: uppercase;
  display: block; margin-bottom: var(--sp-1);
}
.compare-row .cv .side-label { color: var(--ink-2); }
.compare-row .apir .side-label { color: var(--verdigris); }
.compare-row p { margin: 0; font-size: var(--text-small); }
.compare-row .cv p { color: var(--ink-2); }
@media (max-width: 600px) {
  .compare-row { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* ---------- audience lens strip ---------- */
.lens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); max-width: 900px; }
.lens {
  border: var(--hairline); border-radius: var(--r-card);
  background: var(--paper-raise); padding: var(--sp-4) var(--sp-5);
}
.lens .who {
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: var(--track-mono-label); text-transform: uppercase;
  color: var(--copper-deep); display: block; margin-bottom: var(--sp-2);
}
.lens p { margin: 0; font-size: var(--text-small); color: var(--ink-2); }
@media (max-width: 760px) { .lens-grid { grid-template-columns: 1fr; } }

/* ---------- boundaries list ---------- */
.bounds { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.bounds li {
  border-top: var(--hairline); padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  position: relative; font-size: var(--text-body);
}
.bounds li::before {
  content: "—"; position: absolute; left: 0; color: var(--copper-deep);
}
.bounds li:last-child { border-bottom: var(--hairline); }

/* ---------- closing CTA band ---------- */
.about-cta {
  background: var(--ink); color: var(--on-ink-2);
  margin-top: var(--sp-9); padding: var(--sp-8) 0;
}
.about-cta h2 { color: var(--paper); font-size: var(--text-display-2); }
.about-cta p { max-width: var(--measure); color: var(--on-ink-2); }
.about-cta .btn { border-color: var(--paper); color: var(--paper); }
.about-cta .btn:hover { background: rgba(242, 243, 241, 0.1); color: var(--paper); }
.about-cta .btn-copper { background: var(--copper-on-dark); border-color: var(--copper-on-dark); color: var(--ink); }
.about-cta .btn-copper:hover { background: #DA9A6B; border-color: #DA9A6B; color: var(--ink); }
.about-cta a:not(.btn) { color: var(--copper-on-dark); }