/* Tips Page Styles - scoped, minimal, leveraging base.css */
.page-hero {
  padding: var(--space-16) 0 var(--space-10);
  background: radial-gradient(80% 60% at 20% 20%, rgba(0,255,255,0.06), transparent 60%),
              radial-gradient(80% 60% at 80% 40%, rgba(139,92,246,0.06), transparent 60%);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: 1.2fr 1fr; align-items: center; }
}
.hero-copy p { max-width: 60ch; }
.hero-search { margin-top: var(--space-6); }
.hero-ctas { margin-top: var(--space-6); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-media img { border-radius: var(--radius-2xl); box-shadow: var(--shadow-neon-cyan); }

/* Layout with TOC */
.tips-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-8); margin-top: var(--space-10); }
@media (min-width: 1024px) {
  .tips-layout { grid-template-columns: 300px 1fr; align-items: start; }
}

.toc .toc-list ol { display: grid; gap: var(--space-3); counter-reset: items; }
.toc .toc-list a { display: inline-block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); }
.toc .toc-list a:hover { border-color: var(--color-primary); box-shadow: var(--shadow-neon-cyan); }

/* Tip cards */
.tip-card + .tip-card { margin-top: var(--space-8); }
.tip-card .card-body ul { padding-left: var(--space-4); }
.tip-card .card-body ul li { list-style: none; position: relative; padding-left: var(--space-4); margin-bottom: var(--space-2); }
.tip-card .card-body ul li::before { content: '\f111'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 0.25rem; font-size: 0.45rem; color: var(--color-accent); text-shadow: var(--shadow-neon-teal); }

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

/* Utilities for margins (minor helpers) */
.mr-2 { margin-right: var(--space-2); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }