/* ============================================================================
   Operation Hunter — campaign-plan.html only.
   Public transparency / "the plan" page. Builds on the shared Midnight theme
   (theme.css); only adds page-specific pieces. Legal-safe content lives in HTML.
   ============================================================================ */

.card p { color: var(--text); font-size: 14px; line-height: 1.6; }
.card p.muted, p.muted { color: var(--muted); }
.card p a { color: var(--primary); }

/* ---- Allocation grid (where the money goes) --------------------------- */
.alloc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-top: 14px;
}
.alloc-item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
}
.alloc-ico { font-size: 22px; flex: 0 0 auto; line-height: 1.2; }
.alloc-item strong { color: var(--accent); display: block; margin-bottom: 4px; font-size: 14px; }
.alloc-item p { margin: 0; font-size: 13px; color: var(--muted); }

/* ---- Phased plan ------------------------------------------------------- */
.phases { list-style: none; margin: 14px 0 0; padding: 0; }
.phases li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--border);
}
.phases li:last-child { border-bottom: 0; }
.phases .ph-num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--surface-2); color: var(--accent); border: 1px solid var(--primary);
  font-family: 'Cinzel', serif;
}
.phases div { font-size: 14px; line-height: 1.55; }
.phases strong { color: var(--text); }
.phases .muted { color: var(--muted); }

/* ---- Accountability list ---------------------------------------------- */
.transparency { border-left: 3px solid var(--success); }
.acct { margin: 6px 0 0; padding-left: 20px; }
.acct li { margin: 8px 0; font-size: 14px; line-height: 1.55; color: var(--text); }
.acct strong { color: var(--accent); }

/* ---- Theoretical callout ---------------------------------------------- */
.theoretical { border-left: 3px solid var(--warn); }
.theoretical p { color: var(--text); font-size: 14px; }

/* ---- Ways to help ------------------------------------------------------ */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 8px; }
.way {
  background: var(--bg-deep); border: 1px solid var(--border);
  border-radius: 10px; padding: 18px; display: flex; flex-direction: column; gap: 10px;
}
.way h3 { margin: 0; color: var(--text); }
.way .muted { flex: 1; font-size: 13px; }
.way .btn { align-self: flex-start; }

/* ---- Big CTA button ---------------------------------------------------- */
.btn.lg { font-size: 18px; padding: 15px 34px; border-radius: 8px; }

/* ---- Accessibility ----------------------------------------------------- */
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none !important; }
}

@media (max-width: 480px) {
  .btn.lg { width: 100%; text-align: center; }
}