/* About page. Shares .phead with page-legal.css (duplicated here so each page links only its own CSS). */
.phead { position: relative; overflow: hidden; background: var(--ink); color: var(--fg); padding: calc(var(--header-h) + clamp(56px, 8vw, 112px)) 0 clamp(56px, 7vw, 96px); }
.phead::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(55% 90% at 85% 0%, rgba(109,74,255,.38), transparent 70%), radial-gradient(45% 80% at 5% 100%, rgba(255,122,26,.24), transparent 70%); }
.phead .wrap { position: relative; z-index: 1; display: grid; gap: 22px; }
.phead h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); max-width: 16em; color: #fff; }
.phead .lede { color: #b6bed0; }

.about-split { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .about-split { grid-template-columns: 5fr 7fr; gap: 72px; } }
.about-split h2 { margin-top: 14px; }
.about-copy { display: grid; gap: 18px; color: var(--fg-2); font-size: 1.12rem; }
.about-copy strong { color: var(--fg); }

.principles { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.principle { padding: 28px; display: grid; gap: 12px; align-content: start; }
.principle__n { font-family: var(--font-mono); font-size: .78rem; color: var(--orange); letter-spacing: .1em; }
.principle p { color: var(--fg-2); font-size: .98rem; }

.pillars { display: grid; gap: 14px; margin-top: 8px; }
.pillars li { display: flex; gap: 14px; align-items: flex-start; color: var(--fg-2); }
.pillars li::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-top: .65em; }
.pillars strong { color: var(--fg); }