/* ==========================================================================
   ABOUT PAGE STYLES
   ==========================================================================
   Styles specific to about.html. This page reads more like an
   essay than a product page — most sections are prose, not cards or
   feature grids — so several new patterns appear here for the first
   time: a "lead paragraph" style for opening statements, a pull-quote,
   and a narrower reading column for the philosophy sections (long lines
   of text are measurably harder to read — see the .prose-column note
   below for the actual reasoning).
   ========================================================================== */


/* ==========================================================================
   PROSE COLUMN — caps line length for long-form reading sections. This
   is a real typography rule, not a stylistic preference: readability
   research consistently finds that lines longer than ~75 characters
   become harder for the eye to track back to the start of the next
   line. Our body font size and this max-width combine to land around
   65-75 characters per line at typical desktop widths.
   ========================================================================== */

.prose-column {
  max-width: 680px;
}

.prose-column p {
  font-size: var(--text-body-lg);
  margin-bottom: var(--space-lg);
}

.prose-column p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   ABOUT SECTION — generic vertical rhythm wrapper reused for Mission,
   Philosophy, Consistency, and Looking Ahead. Alternating background
   tints (like the homepage) give the eye a resting point between
   sections on a page that's mostly text.
   ========================================================================== */

.about-section {
  padding-block: var(--space-5xl);
}

.about-section.tinted {
  background: var(--color-sand);
}

.about-section .section-eyebrow {
  display: block;
}

.about-section h2 {
  margin-bottom: var(--space-xl);
  max-width: 640px;
}


/* ==========================================================================
   PULL QUOTE — a single emphasized statement, used once in the
   Philosophy section to give the reader's eye a landmark on an
   otherwise text-heavy page. Used sparingly — a page with five pull
   quotes has zero pull quotes, because nothing stands out anymore.
   ========================================================================== */

.pull-quote {
  font-family: var(--font-display);
  font-size: var(--text-heading-md);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  max-width: 620px;
  margin-block: var(--space-2xl);
  padding-left: var(--space-2xl);
  border-left: 3px solid var(--color-brand-blue);
}


/* ==========================================================================
   PROBLEM LIST — three short problem statements. Deliberately NOT
   numbered (01/02/03): these three problems don't happen in sequence
   and don't need to be read in order, so numbering them would imply a
   false ordering. A simple icon marker instead signals "here are three
   related things" without claiming they're steps.
   ========================================================================== */

.problem-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.problem-item {
  display: flex;
  gap: var(--space-lg);
}

.problem-marker {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-sky-soft);
  color: var(--color-brand-blue);
  font-size: 18px;
}

.problem-item h3 {
  font-size: var(--text-heading-sm);
  margin-bottom: var(--space-xs);
}

.problem-item p {
  font-size: var(--text-body-md);
}

@media (min-width: 768px) {
  .problem-list {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   CONSISTENCY VISUAL — an inline SVG line that moves up and down
   unevenly rather than climbing in a smooth, perfect curve. This is a
   direct implementation of the "imperfect progress line" motif from
   the brand positioning: real progress is uneven, and this visual
   makes that idea literal instead of just describing it in prose.
   ========================================================================== */

.consistency-visual-wrap {
  margin-top: var(--space-3xl);
  padding: var(--space-2xl);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.consistency-visual-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.consistency-caption {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-lg);
  font-size: var(--text-body-sm);
  color: var(--color-text-muted);
}


/* ==========================================================================
   PRINCIPLES GRID — reuses the shared .card component from
   components.css for each principle, arranged in a responsive grid.
   No new card styling needed here at all — only the grid layout that
   holds them, which is genuinely specific to this page.
   ========================================================================== */

.principles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.principle-card h3 {
  font-size: var(--text-heading-sm);
  margin-bottom: var(--space-sm);
}

.principle-card p {
  font-size: var(--text-body-sm);
}

@media (min-width: 640px) {
  .principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .principles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}