/* Static "About" page: a stack of prose cards ending in the support block. */
.about-block { margin-bottom: 14px; }
.about-block h2 {
  font-size: 15px; font-weight: 600; letter-spacing: -.2px; margin-bottom: 8px;
}
.about-block p {
  font-size: 13.5px; line-height: 1.7; color: var(--text-dim); max-width: 640px;
}
.about-block p + p { margin-top: 10px; }
.about-list { margin: 4px 0 0; padding-left: 18px; max-width: 640px; }
.about-list li {
  font-size: 13.5px; line-height: 1.7; color: var(--text-dim); margin-bottom: 5px;
}
.about-list li::marker { color: var(--accent); }

/* Support block — last thing on the page, so it reads as a closing ask rather
   than a banner competing with the content above it. */
.about-support {
  margin-top: 22px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.about-support h2 { display: flex; align-items: center; gap: 8px; }
.about-support h2 svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.about-support p { color: var(--text); }
.about-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.about-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 9px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  transition: opacity .15s;
}
.about-btn:hover { opacity: .88; }
.about-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.about-btn-ghost {
  background: transparent; color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.about-btn-ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); opacity: 1; }

@media (max-width: 640px) {
  .about-block h2 { font-size: 14px; }
  .about-btns { flex-direction: column; }
  .about-btn { justify-content: center; }
}