/* The About page, in the API page's visual language. Shared pieces live in
   public-components.css. */
.public-page .about-hero { padding: 64px 0 48px; background: linear-gradient(180deg, #f6faf8 0%, #fff 75%); }
.public-page .about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.public-page .about-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #dce6e0; border-radius: 10px; background: #fff; overflow: hidden; }
.public-page .about-facts li { min-width: 0; padding: 20px; border: 0 !important; }
.public-page .about-facts li:nth-child(even) { border-left: 1px solid #dce6e0 !important; }
.public-page .about-facts li:nth-child(n + 3) { border-top: 1px solid #dce6e0 !important; }
.public-page .about-card { padding: 24px; border: 1px solid #dce6e0; border-radius: 10px; background: #f6faf8; }
.public-page .about-card h3 { margin: 0 0 10px; font-size: 18px; }
.public-page .about-card p { margin: 0 0 12px; font-size: 15px !important; }
.public-page .about-card p:last-child { margin-bottom: 0; }
.public-page .about-note { position: relative; padding-left: 60px; background: #fff; }
.public-page .about-note::before { content: ""; position: absolute; left: 22px; top: 26px; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23146c43' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6m0-9.5v.5'/%3E%3C/svg%3E") center / 22px no-repeat; }
.public-page .about-note.public-notes p { font-size: 14px !important; }
.public-page .about-trust { margin-top: 24px; }
.public-page .about-trust ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid #dce6e0; }
.public-page .about-trust li { margin: 0; border-bottom: 1px solid #dce6e0; }
.public-page .about-trust a { display: flex; align-items: center; gap: 10px; min-height: 48px; color: #1d2723; font-size: 15px; font-weight: 500; text-decoration: none; }
.public-page .about-trust a:hover { color: #146c43; }
.public-page .about-trust .home-icon { flex: none; width: 18px; height: 18px; color: #146c43; }
@media (max-width: 960px) {
  .public-page .about-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .public-page .about-hero { padding: 40px 0 32px; }
  .public-page .about-facts li { padding: 14px; }
  .public-page .about-card { padding: 20px; }
  .public-page .about-note { padding-left: 52px; }
  .public-page .about-note::before { left: 18px; top: 21px; }
}