/* ===== Shared footer / policy modal (identical design to index.html) ===== */
:root {
  --n-void:#050508;
  --n-deep:#08080f;
  --n-surface:#0d0d1a;
  --n-glass:rgba(255,255,255,0.04);
  --n-glass-2:rgba(255,255,255,0.07);
  --n-border:rgba(255,255,255,0.08);
  --n-border-2:rgba(255,255,255,0.14);
  --n-purple:#8b5cf6;
  --n-purple-bright:#a78bfa;
  --n-blue:#3b82f6;
  --n-cyan:#06b6d4;
  --n-pink:#ec4899;
  --n-text:#f8f8ff;
  --n-muted:rgba(248,248,255,0.5);
  --n-faint:rgba(248,248,255,0.25);
  --font-display:'Syne',sans-serif;
  --font-body:'DM Sans',sans-serif;
}
.modal-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,0.72)}
.modal-overlay.active{display:flex;opacity:1;visibility:visible}
.modal-card{width:min(550px,100%);max-height:min(90vh,700px);background:var(--n-surface);border-radius:24px;box-shadow:0 20px 60px rgba(0,0,0,0.3);overflow:hidden;display:flex;flex-direction:column}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid rgba(255,255,255,0.06)}
.modal-title{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--n-text);letter-spacing:0.02em}
.modal-close{border:none;background:transparent;color:var(--n-muted);font-size:22px;line-height:1;cursor:pointer;transition:color .2s}
.modal-close:hover{color:var(--n-text)}
.modal-body{padding:24px 24px 20px;color:var(--n-faint);font-size:15px;line-height:1.7;white-space:pre-wrap}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:18px 24px;border-top:1px solid rgba(255,255,255,0.08)}

/* index.html defines no base `.btn` rule, so on this page `.btn` only exists via
   global.css. Neutralize the global `.btn` base inside the modal so the action
   button renders exactly like index.html (no-op `.btn` + index.html `.btn-primary`). */
.modal-card .btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:0;padding:0;margin:0;border:0;border-radius:0;
  font-family:inherit;font-weight:inherit;font-size:inherit;
  background:none;color:inherit;position:static;overflow:visible;white-space:normal;transition:none;
}
.modal-card .btn::before,.modal-card .btn::after{content:none;display:none}
.modal-card .btn-primary{
  background:linear-gradient(135deg,var(--n-purple),var(--n-blue));
  border:none;color:#fff;
  padding:9px 20px;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;
  font-family:var(--font-body);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 0 24px rgba(139,92,246,0.3);
  transition:all 0.25s;
  min-height:44px;
}
.modal-card .btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 32px rgba(139,92,246,0.5)}