/* ==========================================================================
   X-SEEK — PlantID & Plant Identifier
   Botanical, alive: fresh green, natural light, cream. Organic depth via
   soft leaf silhouettes rather than glowing "AI" effects.
   ========================================================================== */

body[data-app="plant"] {
  background: var(--app-surface);
  color: var(--text-on-light);
}
body[data-app="plant"] .eyebrow { color: var(--accent); }
body[data-app="plant"] .site-nav.is-scrolled { background: color-mix(in srgb, var(--app-surface) 90%, transparent); border-bottom-color: var(--app-line); }
body[data-app="plant"] .nav-links a { color: var(--text-on-light-muted); }
body[data-app="plant"] .nav-links a:hover, body[data-app="plant"] .nav-links a[aria-current="page"] { color: var(--text-on-light); }
body[data-app="plant"] .nav-brand, body[data-app="plant"] .nav-menu-btn { color: var(--text-on-light); }
body[data-app="plant"] .nav-brand__mark { background: var(--ink-950); color: var(--paper-100); }
body[data-app="plant"] .nav-menu-btn { border-color: var(--paper-line-strong); }

/* ---- Leaf silhouettes (original decorative artwork) ---------------------*/

.leaf-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.leaf-shape { position: absolute; color: var(--accent); opacity: 0.14; }
.leaf-shape svg { width: 100%; height: 100%; display: block; }

/* ---- Hero -----------------------------------------------------------------*/

.plant-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(2rem, 1rem + 3vw, 3.5rem);
  padding-bottom: var(--sp-8);
  background: linear-gradient(180deg, #eef4e4, var(--app-surface) 60%);
}
.plant-hero-inner {
  position: relative; z-index: 1;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: 62vh;
}
.plant-hero__title { font-size: var(--fs-11); line-height: 1.03; color: var(--text-on-light); max-width: 13ch; }
.plant-hero__title .accent-word { color: var(--accent); }
.plant-hero__sub { margin-top: var(--sp-4); font-size: var(--fs-7); color: var(--text-on-light-muted); max-width: 44ch; line-height: 1.6; }
.plant-hero__actions { margin-top: var(--sp-5); }
.plant-hero__footnote { margin-top: var(--sp-3); font-size: var(--fs-4); color: var(--text-on-light-faint); }

body[data-app="plant"] .btn-primary { background: var(--accent); color: #fff; }
body[data-app="plant"] .btn-ghost-dark { color: var(--text-on-light); border-color: var(--paper-line-strong); background: rgba(255,255,255,0.4); }
body[data-app="plant"] .btn-ghost-dark:hover { background: rgba(255,255,255,0.7); }

.plant-hero__visual { position: relative; display: flex; justify-content: center; }
.plant-hero__device { width: min(78%, 300px); position: relative; z-index: 1; }
.plant-hero__ring { position: absolute; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.plant-hero__ring--1 { inset: -6%; }
.plant-hero__ring--2 { inset: 8%; }

.plant-mask-scan {
  position: absolute; left: 8%; right: 8%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 55%, transparent);
  top: 12%;
  animation: plant-scan 3.6s ease-in-out infinite;
}
@keyframes plant-scan {
  0%, 100% { top: 12%; opacity: 0; }
  12% { opacity: 1; }
  50% { top: 82%; opacity: 1; }
  62% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .plant-mask-scan { animation: none; display: none; } }

@media (max-width: 980px) {
  .plant-hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .plant-hero__visual { order: -1; margin-bottom: var(--sp-2); }
}

/* ---- Section shells -------------------------------------------------------*/

body[data-app="plant"] .section-title { color: var(--text-on-light); font-size: var(--fs-10); margin-top: var(--sp-2); }
body[data-app="plant"] .eyebrow { justify-content: flex-start; }

/* ---- How it works: growth path -------------------------------------------*/

.plant-path { position: relative; margin-top: var(--sp-7); }
.plant-path-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.plant-path-step {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-line);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  position: relative;
}
.plant-path-step__leaf { width: 34px; height: 34px; color: var(--accent); margin-bottom: var(--sp-3); }
.plant-path-step h3 { font-size: var(--fs-7); color: var(--text-on-light); }
.plant-path-step p { margin-top: 0.5rem; font-size: var(--fs-4); color: var(--text-on-light-muted); line-height: 1.6; }
@media (max-width: 880px) { .plant-path-track { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .plant-path-track { grid-template-columns: 1fr; } }

/* ---- Feature rows (asymmetric, alternating) --------------------------------*/

.plant-feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  padding-block: var(--sp-7);
  border-top: 1px solid var(--app-line);
}
.plant-feature-row.is-reverse .plant-feature-row__visual { order: 2; }
.plant-feature-row__visual { position: relative; display: flex; justify-content: center; }
.plant-feature-row__device { width: min(75%, 280px); }
.plant-feature-row__glow {
  position: absolute; inset: -10%;
  background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  z-index: 0;
}
.plant-feature-row__copy h3 { font-size: var(--fs-9); color: var(--text-on-light); max-width: 14ch; }
.plant-feature-row__copy p { margin-top: var(--sp-3); color: var(--text-on-light-muted); font-size: var(--fs-7); line-height: 1.6; max-width: 46ch; }
.plant-feature-row__tags { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plant-feature-row__tags span {
  font-size: var(--fs-4); padding: 0.4rem 0.8rem; border-radius: var(--radius-pill);
  border: 1px solid var(--paper-line-strong); color: var(--text-on-light-muted);
}
@media (max-width: 880px) {
  .plant-feature-row, .plant-feature-row.is-reverse { grid-template-columns: 1fr; }
  .plant-feature-row.is-reverse .plant-feature-row__visual { order: -1; }
  .plant-feature-row__visual { order: -1; }
}

/* ---- Showcase -------------------------------------------------------------*/

.plant-showcase-grid {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.plant-showcase-grid figcaption { margin-top: var(--sp-2); font-size: var(--fs-4); color: var(--text-on-light-muted); text-align: center; }
@media (max-width: 880px) { .plant-showcase-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .plant-showcase-grid { grid-template-columns: 1fr; } }

/* ---- Final CTA --------------------------------------------------------------*/

.plant-final { text-align: center; border-top: 1px solid var(--app-line); }
.plant-final h2 { font-size: var(--fs-10); color: var(--text-on-light); max-width: 18ch; margin-inline: auto; }
.plant-final p { margin-top: var(--sp-3); color: var(--text-on-light-muted); }
.plant-final .btn-row { justify-content: center; margin-top: var(--sp-5); }

/* ---- Footer/switcher adapt to light app theme -----------------------------*/
body[data-app="plant"] .switcher,
body[data-app="plant"] .site-footer { background: var(--ink-950); color: var(--text-on-dark); }