/*
 * About page — founder-voice story body + Principles 3-card grid.
 *
 * Design's stats / team / investors / timeline grids deliberately
 * NOT used: those required fabricated content (fake names, fake VC
 * partners, fake metrics) that would violate the no-fabrication rule.
 * Existing vetted copy ports into the story body; the design's
 * Principles section ports as-is (positioning claims, no fabrication).
 *
 * Page hero / final CTA / footer use shared chrome.
 */

/* ============ STORY BODY ============ */
.about-story {
  padding: 96px 48px;
  border-bottom: 1px solid var(--ink-3);
}
.about-story-inner {
  max-width: 760px;
  margin: 0 auto;
}
.about-story-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 28px;
  font-weight: 600;
}
.about-story p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--gray-3);
  margin-bottom: 24px;
  text-wrap: pretty;
}
.about-story p:last-child { margin-bottom: 0; }
.about-story p strong { color: var(--paper); font-weight: 600; }

/* ============ PRINCIPLES ============ */
.about-principles {
  padding: 120px 48px;
  border-bottom: 1px solid var(--ink-3);
}
.about-principles-inner { max-width: var(--max-w); margin: 0 auto; }
.about-principles-head { max-width: 720px; margin-bottom: 64px; }
.about-principles-h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 56px;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--paper);
  margin-top: 12px;
  text-wrap: balance;
}

.about-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ink-3);
}
.about-principle {
  padding: 40px 36px;
  border-right: 1px solid var(--ink-3);
}
.about-principle:last-child { border-right: none; }
.about-principle-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--amber);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.about-principle-title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 16px;
  text-wrap: balance;
}
.about-principle-body {
  font-size: 15px;
  color: var(--gray-3);
  line-height: 1.6;
  text-wrap: pretty;
}

@media (max-width: 1024px) {
  .about-story { padding: 72px 32px; }
  .about-principles { padding: 96px 32px; }
  .about-principles-h2 { font-size: 44px; }
}
@media (max-width: 768px) {
  .about-story { padding: 56px 20px; }
  .about-story p { font-size: 15px; margin-bottom: 20px; }
  .about-principles { padding: 72px 20px; }
  .about-principles-h2 { font-size: 32px; }
  .about-principles-head { margin-bottom: 32px; }
  .about-principles-grid { grid-template-columns: 1fr; }
  .about-principle {
    border-right: none;
    border-bottom: 1px solid var(--ink-3);
    padding: 32px 24px;
  }
  .about-principle:last-child { border-bottom: none; }
  .about-principle-title { font-size: 22px; }
}
@media (max-width: 480px) {
  .about-principles-h2 { font-size: 28px; }
}