/* Rules Page Styles - LottoBestNZ */
.page-hero {
  position: relative;
  color: var(--color-text-inverse);
  background: linear-gradient(135deg, rgba(10,31,68,0.85) 0%, rgba(0,179,134,0.65) 100%), url('../images/rules-hero.webp') center/cover no-repeat;
}
.page-hero .hero-inner { padding: var(--space-16) 0; }
.page-hero .hero-sub { margin-top: var(--space-2); max-width: 60ch; color: var(--color-text-inverse); }
.page-hero .hero-actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }

.toc { background: var(--color-bg-secondary); border-top: 1px solid var(--color-gray-200); border-bottom: 1px solid var(--color-gray-200); }
.toc .toc-list { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) 0; }
.toc .toc-list a { color: var(--color-secondary); font-weight: var(--font-weight-medium); }
.toc .toc-list a:hover { color: var(--color-primary-dark); }

.section { padding: var(--space-12) 0; }

.visual img { border-radius: var(--radius-xl); }

.steps { counter-reset: step; display: grid; gap: var(--space-2); }
.steps li { position: relative; padding-left: 2.25rem; }
.steps li::before { counter-increment: step; content: counter(step) "."; position: absolute; left: 0; top: 0; color: var(--color-primary-dark); font-weight: var(--font-weight-bold); }

.rule-list { display: grid; gap: 0.5rem; }
.rule-list li { padding-left: 1.25rem; position: relative; }
.rule-list li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 0.5rem; height: 0.5rem; background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,179,134,0.15); }

/* FAQ */
.faq-header { display: flex; flex-direction: column; gap: var(--space-4); }
.faq-search { max-width: 520px; }
.faq-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.faq-item { background: var(--color-bg-secondary); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-gray-200); }
.faq-item > summary { list-style: none; cursor: pointer; font-weight: var(--font-weight-semibold); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item[open] { background: var(--color-white); box-shadow: var(--shadow-sm); }
.faq-body { margin-top: var(--space-2); color: var(--color-text-secondary); }

/* CTA row */
.cta-row { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Responsive Tweaks */
@media (max-width: 768px) {
  .page-hero .hero-inner { padding: var(--space-12) 0; }
}