.auto-hero { padding-top: calc(var(--space-section) * 0.9); padding-bottom: var(--space-lg); }
.auto-hero__title { max-width: 980px; }
.auto-eyebrow { font-size: var(--fs-sm); color: var(--color-text-sec); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-sm); }
.auto-hero__title { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: var(--fw-medium); margin-bottom: var(--space-md); }
.auto-hero__intro { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--color-text-sec); max-width: var(--reading-width); margin-bottom: var(--space-md); }
.auto-cta { display: inline-block; background: var(--color-bg-dark); color: var(--color-text-inv); padding: 16px 28px; border-radius: 999px; font-weight: var(--fw-semibold); text-decoration: none; transition: opacity var(--duration-fast); }
.auto-cta:hover { opacity: 0.85; }
.auto-section { padding-top: var(--space-xl); }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-sm); margin-top: var(--space-md); }
.auto-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-md); }
.auto-card h3 { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-medium); margin-bottom: var(--space-xs); }
.auto-card p, .auto-steps p, .auto-about p { line-height: var(--lh-normal); color: var(--color-text-sec); }
.auto-steps { list-style: none; padding: 0; margin-top: var(--space-md); display: grid; gap: var(--space-md); max-width: var(--reading-width); }
.auto-steps li { display: flex; gap: var(--space-sm); align-items: flex-start; }
.auto-steps span { flex: 0 0 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-text); display: grid; place-items: center; font-family: var(--font-display); }
.auto-steps h3 { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-medium); margin-bottom: 4px; }
.auto-about { max-width: var(--reading-width); }
.auto-about p + p { margin-top: var(--space-sm); }
.auto-about a { text-decoration: underline; }
.auto-final { padding: var(--space-section) 0 var(--space-xl); text-align: center; }
.auto-final h2 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-medium); margin-bottom: var(--space-md); }
@media (max-width: 700px) { .auto-hero { padding-top: 150px; } }