/* About page styles – lightweight and aligned with site palette */

/* Vars (fallbacks if not set elsewhere) */
:root{
  --campsul-blue: #BBD4FF;
  --campsul-blue-2: #E4EDFD;
  --ink-strong: #0b1119;
  --ink-med: #243246;
  --ink-subtle: #61718a;
  --border-lite: #cfd9f2;
  --brand: #3aa0ff;
}

/* Wrapper tweaks for this page */
.about-wrap{ width:100%; display:block; }
.about-hero{
  background: var(--campsul-blue-2);
  border: 1px solid var(--border-lite);
  border-radius: 16px;
  padding: 20px;
  max-width: 720px;
}
.about-hero h1{ margin: 0 0 6px; font-size: 2rem; color: var(--ink-strong); }
.about-hero .lede{ color: var(--ink-subtle); margin: 6px 0 14px; }

/* Pill nav */
.pill-nav{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid var(--border-lite); background:#fff; color:#111; font-weight:700;
  text-decoration:none;
}
.pill.is-active, .pill:focus{ background: var(--brand); color:#fff; border-color: var(--brand); }

/* Grid of cards */
.about-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.about-card{
  background:#fff; border:1px solid var(--border-lite); border-radius:16px;
  padding: 18px; color:#111; box-shadow: 0 6px 12px rgba(9,30,66,.05);
}
.about-card h2{ margin: 0 0 8px; color: var(--ink-strong); }
.about-card h3{ margin: 14px 0 6px; color: var(--ink-med); }
.about-card p{ color:#273444; line-height:1.5; }
.about-card details{ border-top:1px dashed #e6eef7; padding-top:10px; margin-top:10px; }
.about-card summary{ cursor:pointer; font-weight:700; }

/* Lists */
.checklist{ padding-left: 18px; }
.checklist li + li{ margin-top: 6px; }
.steps{ padding-left: 18px; }
.steps li + li{ margin-top: 6px; }

/* Small tags row */
.pill-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 8px; }
.tag{
  display:inline-block; background:#f8fbff; border:1px solid var(--border-lite);
  color:#0b1119; padding:6px 10px; border-radius:999px; font-size:.9rem;
}

/* CTA card */
.about-card.cta a{ color:#0b1119; border-bottom:2px solid var(--brand); text-decoration:none; }
.about-card.cta a:hover{ color:#036; }

/* Responsive */
@media (max-width: 960px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-hero{ max-width: none; }
}

@media (max-width: 480px){
  .about-hero h1{ font-size: 1.6rem; }
  .pill{ padding:6px 10px; }
}