/* Mechanics page specific styles (kept minimal; relies on base.css) */
.section { padding-block: var(--space-40); }

/* Hero */
.hero { padding-block: var(--space-48); background: linear-gradient(180deg, #FFF7E6 0%, #FFF8F0 60%); }
.hero__inner { display: grid; gap: var(--space-24); align-items: center; grid-template-columns: 1.1fr 1fr; }
.hero__content p { color: var(--gray-700); }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--gray-200); }
.hero__cta { display: flex; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-12); }
@media (max-width: 960px) { .hero__inner { grid-template-columns: 1fr; } }

/* Pricing */
.pricing { display: grid; gap: var(--space-24); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing__item { position: relative; }
@media (max-width: 960px) { .pricing { grid-template-columns: 1fr; } }

/* FAQ */
#faq-list details { border: 1px solid var(--gray-200); }
#faq-list summary { cursor: pointer; font-weight: 700; padding: var(--space-8) 0; }
#faq-list .card__body { margin-top: var(--space-8); }

/* Articles image */
.articles__media img { border-radius: var(--radius-lg); border: 1px solid var(--gray-200); box-shadow: var(--shadow-md); }