/* Cards: features, live services / packages, and the illustrative app mocks. */
.card {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.section--alt .card { background: var(--color-bg); }

/* --- Services (live from the API, static fallback in the HTML) ---------- */
.service { display: flex; flex-direction: column; }
.service h3 { margin-block-start: 1rem; }
.service p { color: var(--color-text-secondary); margin-block-end: 1rem; }
.service .price {
  margin-block-start: auto;
  margin-block-end: 0;
  color: var(--color-text);
  font-weight: 600;
}
.service .price strong { color: var(--brand-primary); font-family: var(--font-display); font-size: 1.15rem; }
.card-link { margin-block-start: .75rem; font-weight: 600; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: 1rem; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: .15rem .65rem;
  border-radius: var(--radius-pill);
  background: var(--brand-primary-soft);
  color: var(--brand-primary-strong);
  font-size: .82rem;
  font-weight: 600;
}
.chip--accent { background: var(--brand-accent-soft); color: var(--brand-accent-ink); }

/* --- Care packages ------------------------------------------------------ */
.package { position: relative; display: flex; flex-direction: column; border-block-start: 5px solid var(--brand-accent); }
.package p { color: var(--color-text-secondary); }
.package .items { list-style: none; display: grid; gap: .35rem; margin-block-end: 1.25rem; }
.package .items li { display: flex; gap: .5rem; align-items: center; }
.package .items .icon { color: var(--brand-success); }
.package .price { margin-block: auto 0; font-weight: 600; }
.package .price strong { color: var(--brand-primary); font-family: var(--font-display); font-size: 1.3rem; }
.package .meta { color: var(--color-text-secondary); font-size: var(--fs-sm); margin: .25rem 0 0; }

/* --- Illustrative mocks (hero visit card, family notifications) --------- */
.mock-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.mock-head { display: flex; align-items: center; gap: .9rem; padding-block-end: 1.1rem; border-block-end: 1px solid var(--color-border); }
.mock-head div { display: grid; flex: 1; }
.mock-head small { color: var(--color-text-secondary); }
.mock-chip {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  background: var(--brand-success-soft);
  color: var(--brand-success-ink);
  font-size: .82rem;
  font-weight: 700;
}
.live-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-success);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; transform: scale(1.4); } }

.mock-steps { list-style: none; display: grid; gap: .9rem; margin-block-start: 1.2rem; }
.mock-steps li {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--color-text-secondary);
}
.mock-steps .icon {
  padding: 6px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
}
.mock-steps .done { color: var(--color-text); }
.mock-steps .done .icon { background: var(--brand-success-soft); color: var(--brand-success-ink); }
.mock-steps .now {
  padding: .6rem;
  margin-inline: -.6rem;
  border-radius: var(--radius-sm);
  background: var(--brand-accent-soft);
  color: var(--color-text);
  font-weight: 600;
}
.mock-steps .now .icon { background: var(--brand-accent); color: var(--color-text); }

.notif-stack { list-style: none; display: grid; gap: .9rem; }
.notif-stack li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.notif-stack li:nth-child(2) { margin-inline-start: 1.5rem; }
.notif-stack li:nth-child(3) { margin-inline-start: 3rem; }
.notif-stack span { display: grid; }
.notif-stack small { color: var(--color-text-secondary); }
.notif-stack .icon {
  padding: 8px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--brand-primary-soft);
  color: var(--brand-primary);
}
@media (max-width: 420px) {
  .notif-stack li:nth-child(n) { margin-inline-start: 0; }
}

/* Loading shimmer for live lists (aria-busy set by the scripts). */
[aria-busy="true"] .card { opacity: .6; }