/* Plant Identifier — dedicated tool landing page (uses design tokens) */
.id-hero {
    padding: calc(var(--s-16) + 68px) 0 var(--s-10);
    text-align: center;
    background: linear-gradient(180deg, var(--color-primary-soft) 0%, var(--color-white) 100%);
}
.id-hero .hero-tagline { max-width: 720px; margin: 0 auto var(--s-5); }
.id-hero .hero-buttons { margin-top: var(--s-6); }
.id-hero .hero-note { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--color-gray-500); }

.id-section { padding: var(--s-10) 0; }
.id-section.alt { background: var(--color-gray-50); }

.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-6); margin-top: var(--s-6); }
.step-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--r-xl); padding: var(--s-6); }
.step-num { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--color-primary); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-3); }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.feat-item { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--r-lg); padding: var(--s-5); }
.feat-item h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); }

.id-list { columns: 2; column-gap: var(--s-8); margin-top: var(--s-6); }
.id-list li { margin-bottom: var(--s-2); line-height: 1.5; }
@media (max-width: 640px) { .id-list { columns: 1; } }

.privacy-note { margin-top: var(--s-6); padding: var(--s-5); background: var(--color-primary-soft); border-radius: var(--r-lg); color: var(--color-gray-700); }

.id-faq { max-width: 760px; margin: 0 auto; }
.id-faq details { border: 1px solid var(--color-gray-200); border-radius: var(--r-lg); padding: var(--s-4); margin-bottom: var(--s-3); }
.id-faq summary { font-weight: 700; cursor: pointer; color: var(--color-gray-900); }
.id-faq p { margin-top: var(--s-2); color: var(--color-gray-600); line-height: 1.65; }

.id-cta { text-align: center; padding: var(--s-12) 0; background: var(--color-gray-900); color: #fff; border-radius: var(--r-2xl); }
.id-cta h2 { color: #fff; }
.id-cta p { color: rgba(255,255,255,.8); max-width: 640px; margin: var(--s-3) auto var(--s-6); }