.ag-wrap { max-width: 980px; margin: 0 auto; padding: 20px; font-family: Arial, Helvetica, sans-serif; color: #0f172a; }
.ag-hero { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; text-align: center; }
.ag-hero h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.2; }
.ag-tagline { margin: 0 0 16px; font-size: 16px; color: #334155; }

.ag-cta { margin: 12px 0 0; }
.ag-btn { display: inline-block; padding: 10px 18px; border-radius: 10px; border: 1px solid #0ea5e9; text-decoration: none; font-weight: bold; }
.ag-btn { background: #0ea5e9; color: #ffffff; }
.ag-btn:hover { filter: brightness(0.95); }

.ag-content { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 20px 0; }
@media (min-width: 800px) {
  .ag-content { grid-template-columns: 1fr 1fr; }
}

.ag-col { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; }
.ag-col h2 { margin-top: 0; font-size: 22px; }
.ag-col h3 { font-size: 18px; margin-top: 18px; }

.ag-list { padding-left: 18px; }
.ag-list li { margin: 6px 0; }

.ag-steps { padding-left: 20px; }
.ag-steps li { margin: 6px 0; }

.ag-tip { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 12px; margin-top: 12px; }
.ag-tip h4 { margin: 0 0 6px; font-size: 15px; }
.ag-tip code { background: #e2e8f0; padding: 2px 6px; border-radius: 6px; }

.ag-rules { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 20px; }
.ag-rules h3 { margin-top: 0; font-size: 18px; }
.ag-rules ul { padding-left: 18px; }
.ag-rules li { margin: 6px 0; }

.ag-join { text-align: center; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; margin-top: 20px; }
.ag-join h2 { margin: 0 0 8px; }

.ag-divider { margin: 24px 0; border: 0; border-top: 1px solid #e5e7eb; }
.ag-footer { text-align: center; color: #475569; }
.ag-footer small { font-size: 12px; }