/* =========================
   About Page Layout
========================= */
#about-page {
  padding: clamp(2.5rem, 4vw, 3.5rem) 1rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(254,249,195,0.7), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(221,239,253,0.7), transparent 55%),
    #f8fafc;
}

#about-page .about-container {
  max-width: 800px; margin: 0 auto;
  background: #ffffff; border-radius: 1.75rem;
  box-shadow: 0 14px 40px rgba(15,23,42,0.08);
  border: 1px solid rgba(148,163,184,0.35);
  position: relative; overflow: hidden;
  padding: 40px;
  line-height: 1.8; color: #333;
  
  /* Local Vars */
  --about-main: #d4a373;
  --about-bg: #faedcd;
}

/* Decorations */
#about-page .about-container::before,
#about-page .about-container::after {
  content: "🐾"; position: absolute; opacity: 0.08; pointer-events: none;
}
#about-page .about-container::before { font-size: 5rem; right: -0.5rem; top: -1rem; transform: rotate(-15deg); }
#about-page .about-container::after { font-size: 3.8rem; left: -0.5rem; bottom: -0.8rem; transform: rotate(12deg); }

/* Typography */
.about-container h1 {
  font-size: 24px; color: var(--about-main); text-align: center;
  border-bottom: 2px solid var(--about-main); padding-bottom: 10px; margin-bottom: 24px;
}
.about-container h2 {
  font-size: 20px; background-color: var(--about-bg); color: #555;
  padding: 10px 15px; border-radius: 8px; margin: 40px 0 20px;
}
.about-container h3 {
  font-size: 18px; border-left: 5px solid var(--about-main);
  padding-left: 10px; margin: 30px 0 15px;
}
.about-container p { margin-bottom: 1.5em; }
.about-container ul {
  background-color: #f9f9f9; padding: 20px 20px 20px 40px;
  border-radius: 8px; border: 1px solid #eee;
}
.about-container li { margin-bottom: 10px; }

.about-container strong, .about-container b {
  color: #b35d35;
  background: linear-gradient(transparent 70%, #ffebd4 70%);
}
.pawfect-note {
  font-size: 0.85em; color: #777;
  margin-top: 40px; padding-top: 20px;
  border-top: 1px dashed #ccc;
}

@media (max-width: 600px) {
  .about-container { padding: 15px; }
  .about-container h1 { font-size: 20px; }
}