/* About page — uses design tokens from index.css. Page-specific layout only. */

/* Page wrapper that scopes the long-form content. */
.nn-page {
  max-width: 760px;
  margin: 0 auto var(--space-5);
  padding: 0 var(--space-2);
}

/* Long-form prose block. */
.nn-prose h2 {
  font-size: var(--t-section);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: var(--space-5) 0 var(--space-2);
  text-align: left;
}

.nn-prose p {
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 var(--space-3);
  max-width: none;
  text-align: left;
  opacity: 1;
}

/* Feature list — same rhythm as the design system. */
.nn-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0;
  max-width: none;
}

.nn-list li {
  position: relative;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-2);
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.nn-list li:last-child { border-bottom: 0; }

.nn-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* Team section title. */
.nn-team-title {
  font-size: var(--t-section);
  font-weight: 600;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-3);
  text-align: center;
}

/* Team grid — two columns desktop, single column mobile. */
.nn-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

/* Team card — flat, single shadow. */
.nn-team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.nn-team-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Team icon (circle avatar, single accent). */
.nn-team-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-size: 24px;
  margin: 0 auto var(--space-2);
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.25);
  text-decoration: none;
}

.nn-team-icon--link { display: inline-flex; }
.nn-team-icon--link:hover { transform: scale(1.05); }

/* Team member heading + paragraph. */
.nn-team-card h3 {
  font-size: var(--t-card);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--space-1);
}

.nn-team-card p {
  font-size: var(--t-caption);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: none;
  text-align: center;
  opacity: 1;
}

/* Inline link in the heading. */
.nn-team-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}

.nn-team-link:hover { border-bottom-color: var(--accent); }

/* Bottom CTA row. */
.nn-cta-row {
  display: flex;
  justify-content: center;
  margin: var(--space-4) 0 var(--space-5);
}

.nn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  font-size: var(--t-body);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.nn-cta-secondary:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

/* Small page-specific entrance details, rather than permanent motion. */
@keyframes nn-about-rule { from { transform: scaleX(0); opacity: .5; } to { transform: scaleX(1); opacity: 1; } }
.nn-team-title::after { content: ''; display: block; width: 40px; height: 2px; margin: 12px auto 0; background: var(--accent); transform-origin: center; animation: nn-about-rule .55s cubic-bezier(.2,.75,.25,1) both; }
.nn-team-icon--link { transition: transform .22s ease, box-shadow .22s ease; }
.nn-team-icon--link:hover, .nn-team-icon--link:focus-visible { transform: translateY(-2px) scale(1.03); box-shadow: 0 9px 20px rgba(37,99,235,.2); }
@media(prefers-reduced-motion:reduce) { .nn-team-title::after { animation: none; } .nn-team-icon--link { transition: none; } }

/* DietChat portraits: keep the same source photos inside NewsNerd's avatar circles. */
.nn-team-icon--photo { overflow: hidden; background: var(--surface); }
.nn-team-icon--photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }