/* Mechanics Page - Page-specific styles (builds on base.css) */

.mechanics-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background: linear-gradient(180deg, rgba(10,8,6,0.6) 0%, rgba(10,8,6,0.9) 100%), radial-gradient(1000px 400px at 10% 10%, rgba(201,169,97,0.08), transparent 60%);
}

.mechanics-hero .hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.mechanics-hero .hero-copy p.lead { max-width: 50ch; }

.hero-cta { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }

.hero-figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-2xl); border: 1px solid var(--color-neutral-800); }

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

.mechanics-cards .card { height: 100%; }

/* FAQ */
.faq-list {
  display: grid;
  gap: var(--space-4);
}

.faq-list details {
  background: var(--color-background-elevated);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}

.faq-list summary {
  font-family: var(--font-ui);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  outline: none;
}

.faq-list .answer { margin-top: var(--space-3); color: var(--color-text-secondary); }

/* CTA wrap */
.cta-wrap .card { background: linear-gradient(180deg, var(--color-background-elevated), var(--color-background-alt)); }

/* Responsive */
@media (max-width: 1024px) {
  .mechanics-hero .hero-inner { grid-template-columns: 1fr; }
}