/* ==========================================================================
   Sol Genesys — Home page
   --------------------------------------------------------------------------
   1. Hero
   2. Solution Finder
   3. Why Sol Genesys
   4. How it works (numbered steps)
   ========================================================================== */

/* 1. Hero ------------------------------------------------------------------ */
.hero {
  padding-block: var(--space-9);
  border-bottom: 1px solid var(--color-border);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
}

.hero h1 {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.hero__lead {
  max-width: 34rem;
  margin-top: var(--space-5);
  font-size: var(--text-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.hero__facts {
  margin-top: var(--space-7);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

/* Large version of the logo mark: gray hexagon, blue S */
.hero__art {
  display: none;
}

@media (min-width: 1024px) {
  .hero__art {
    display: block;
    width: 100%;
    max-width: 20rem;
    justify-self: end;
  }
}

.hero__art path {
  fill: none;
  stroke-width: 9;
  stroke-linejoin: miter;
  stroke-miterlimit: 10;
}

.hero__art-hex {
  stroke: var(--color-border-strong);
}

.hero__art-s {
  stroke: var(--color-accent);
}

/* 2. Solution Finder ------------------------------------------------------- */
.finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
}

@media (min-width: 1024px) {
  .finder {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

.finder__options {
  border-bottom: 1px solid var(--color-border);
}

.finder-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: left;
  color: var(--color-text-muted);
  transition: color var(--duration) ease;
}

.finder-option:hover {
  color: var(--color-text);
}

/* Hexagon marker: gray when idle, blue when selected */
.finder-option::before {
  content: "";
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.866rem;
  background: var(--color-border-strong);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.finder-option[aria-pressed="true"] {
  color: var(--color-text);
}

.finder-option[aria-pressed="true"]::before {
  background: var(--color-accent-text);
}

.finder__result h3 {
  font-size: var(--text-h3);
}

.finder__result > p {
  margin-top: var(--space-3);
}

.finder__result .hex-list {
  margin-block: var(--space-5) var(--space-6);
  color: var(--color-text);
}

/* 3. Why Sol Genesys ------------------------------------------------------- */
.why-list {
  font-size: var(--text-lg);
  color: var(--color-text);
}

.why-tools {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

/* 4. How it works ---------------------------------------------------------- */
.steps h3 {
  margin-top: var(--space-4);
  font-size: 1.125rem;
}

.steps p {
  margin-top: var(--space-2);
}