/* In Charge Privacy — Kits picker add-on styles
 * Appended after style.css. Uses the site's existing tokens so it inherits
 * light/dark themes, spacing, and typography.
 */

/* Nav pill for the paid upgrade — subtly differentiated from other nav links */
.main-nav .nav-kit-link {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-weight: 600;
}
.main-nav .nav-kit-link:hover,
.main-nav .nav-kit-link:focus-visible {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Splash third card renders as an <a>; keep it consistent with the two buttons */
.mode-choice-grid a.mode-choice-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

/* Inline note at the end of section 04 · Good habits */
.habits-kit-note {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.habits-kit-note p { margin: 0; }
.habits-kit-note strong { color: var(--color-text); }
.habits-kit-note a { color: var(--color-primary); font-weight: 600; }

/* ============================================================
 * #kits section — two side-by-side product cards
 * ============================================================ */

#kits .kits-container { max-width: 72rem; }

/* Two-column grid on desktop, stacks on narrow screens */
#kits .kits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 780px) {
  #kits .kits-grid { grid-template-columns: 1fr; }
}

/* Individual product card */
#kits .kit-card {
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}
#kits .kit-card-eyebrow {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
#kits .kit-card-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--color-text);
}
#kits .kit-card-price {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}
#kits .kit-card-price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
#kits .kit-card-lede {
  margin: 0 0 1rem 0;
  color: var(--color-text-muted);
  line-height: 1.5;
}
#kits .kit-card-bullets {
  margin: 0 0 1.25rem 0;
  padding-left: 1.1rem;
  color: var(--color-text);
  flex: 1;
}
#kits .kit-card-bullets li {
  margin-bottom: 0.4rem;
  line-height: 1.45;
}
#kits .kit-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
#kits .kit-card-actions .btn { width: 100%; text-align: center; }
#kits .kit-card-best {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
#kits .kit-card-best strong { color: var(--color-text); }

/* Shared safety aside (covers both kits) */
#kits .kits-safety {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
}
#kits .kits-safety h3 {
  margin: 0 0 0.4rem 0;
  font-size: 1rem;
  color: var(--color-text);
}
#kits .kits-safety p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
#kits .kits-safety a { color: var(--color-primary); font-weight: 600; }

#kits .kits-footnote {
  margin: 1rem 0 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}