/* Scenario 77 — About page. */

/* ============== Hero ============== */
.about-hero {
  position: relative;
  background:
    radial-gradient(rgba(245,245,245, calc(var(--grid-opacity) + 0.03)) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size),
    linear-gradient(135deg, #0E0E11 0%, #14141A 100%);
  border-bottom: 1px solid var(--border);
  padding: 96px 0 var(--section-py);
  overflow: hidden;
}
.about-hero .corner-mark {
  position: absolute; top: 28px; right: var(--gutter);
  display: flex; align-items: center; gap: 10px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.about-hero .corner-mark .dot { width: 6px; height: 6px; background: var(--red); }

.about-hero-grid {
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 80px; align-items: end;
}
.ah-main .eyebrow { margin-bottom: 32px; }
.ah-main h1 { margin-bottom: 28px; max-width: 1000px; }
.ah-main .lede { max-width: 680px; }
.ah-main .lede strong { color: var(--text-primary); font-weight: 600; }

/* About hero stat card */
.ah-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex; flex-direction: column;
}
.ahc-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--divider);
}
.ahc-row:last-of-type { border-bottom: none; }
.ahc-row .ahc-label {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.ahc-row .ahc-value {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 14px; letter-spacing: -0.005em;
  color: var(--text-primary);
  text-align: right;
}
.ahc-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 10px; color: var(--red);
  letter-spacing: 0.14em; text-transform: uppercase;
  text-align: right;
}

/* ============== Why we exist ============== */
.why-grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 96px; align-items: start;
}
.why-lead h2 { max-width: 460px; }
.why-body { display: flex; flex-direction: column; gap: 18px; max-width: 720px; }
.why-body .lede strong { color: var(--text-primary); font-weight: 600; }
.why-body p strong { color: var(--text-primary); font-weight: 600; }

/* ============== Principles matrix ============== */
.principles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--divider);
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
}
.principle {
  background: var(--bg);
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}
[data-rhythm="alt"] .section.surface .principle { background: var(--surface); }
.principle .pr-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.principle .pr-num {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 56px; line-height: 1; letter-spacing: -0.02em;
  color: var(--red);
}
.principle .pr-tag {
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.principle h3 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 26px; line-height: 1.2; letter-spacing: -0.012em;
  color: var(--text-primary);
  margin-top: 6px;
}
.principle p {
  font-size: 15px; line-height: 1.65; color: var(--text-secondary);
  max-width: 480px;
}

/* ============== Who we serve — fit table ============== */
.serve-grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start;
}
.serve-lead h2 { margin-bottom: 24px; max-width: 460px; }
.serve-lead .lede { margin-bottom: 18px; max-width: 480px; }
.serve-lead .body { max-width: 480px; }
.serve-lead .body strong { color: var(--text-primary); font-weight: 600; }

.fit-table {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.ft-header, .ft-row {
  display: grid; grid-template-columns: 1fr 1fr;
}
.ft-header {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}
[data-rhythm="alt"] .section .ft-header { background: var(--surface); }
.ft-col-head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 24px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}
.ft-col-head.ft-good { color: var(--jade); border-right: 1px solid var(--divider); }
.ft-col-head.ft-bad { color: var(--text-muted); }
.ft-dot { width: 8px; height: 8px; border-radius: 50%; }
.ft-dot.ft-good-dot { background: var(--jade); }
.ft-dot.ft-bad-dot { background: var(--text-muted); opacity: 0.6; }

.ft-row { border-bottom: 1px solid var(--divider); }
.ft-row:last-child { border-bottom: none; }
.ft-cell {
  padding: 22px 24px;
  font-size: 15px; line-height: 1.55;
  font-family: var(--font-heading); font-weight: 500;
  letter-spacing: -0.005em;
}
.ft-cell.ft-good-cell {
  color: var(--text-primary);
  border-right: 1px solid var(--divider);
}
.ft-cell.ft-bad-cell {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.015);
}
.ft-cell strong { color: var(--text-primary); font-weight: 700; }
.ft-cell.ft-bad-cell strong { color: var(--text-primary); }

/* ============== Footer legal links ============== */
.footer .bar {
  flex-wrap: wrap; gap: 16px;
}
.footer .bar .legal {
  display: flex; gap: 24px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.footer .bar .legal a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 150ms ease;
}
.footer .bar .legal a:hover { color: var(--text-primary); }

/* ============== Responsive ============== */
@media (max-width: 980px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .why-grid { grid-template-columns: 1fr; gap: 32px; }
  .principles { grid-template-columns: 1fr; }
  .serve-grid { grid-template-columns: 1fr; gap: 32px; }
  .ft-header, .ft-row { grid-template-columns: 1fr; }
  .ft-col-head.ft-good, .ft-cell.ft-good-cell {
    border-right: none;
    border-bottom: 1px solid var(--divider);
  }
}