/* MineChef — below ground: strata, depth ruler, features, final CTA, footer. Owned by the "hero"/"copy"/"form" pieces as relevant. */

.underground {
  position: relative;
  /* pulled up under the foot of the fold by exactly the band the hero leaves clear (hero.css), so the topsoil,
     its seam line and roots are already in the fold, under the pitch and the scroll cue: the page is one dig */
  margin-top: calc(-1 * var(--fold-overlap, 0px));
  /* plain stepped strata (one hue step per 25 m tick, soft 4% blends) — art.css paints the full
     cave (wavy edges, walls, ore) on top of this; keep the two in the same bands */
  background:
    linear-gradient(to bottom,
      var(--earth-0) 0 20%,
      var(--earth-1) 24% 46%,
      var(--earth-2) 50% 72%,
      var(--earth-3) 76% 92%,
      var(--bedrock) 96% 100%);
  overflow: hidden;
}

.underground__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  /* top: the usual breathing room, plus the band that sits under the fold's foot, so the heading and the 0 m mark
     stay clear of the pitch and the scroll cue above them */
  padding: calc(clamp(72px, 10vh, 120px) + var(--fold-overlap, 0px)) var(--gutter) clamp(56px, 8vh, 96px);
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr); /* minmax(0,…): the content column never grows past the page for a wide child */
  gap: clamp(24px, 4vw, 56px);
}

/* ---- depth ruler ---- */
.ruler {
  position: relative;
  border-left: 2px solid var(--line-strong);
  background:
    repeating-linear-gradient(to bottom, var(--line-strong) 0 2px, transparent 2px 24px) 0 0 / 14px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--line-strong) 0 2px, transparent 2px 120px) 0 0 / 26px 100% no-repeat;
  font-variant-numeric: tabular-nums;
}
.ruler__mark {
  position: absolute;
  left: 30px;
  transform: translateY(-50%);
  color: var(--ink-faint);
  white-space: nowrap;
}
.ruler__mark--bedrock { color: var(--gem-amber); }

/* ---- content column ---- */
.shaft { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 8vh, 96px); }
.section-head, .features, .bedrock { min-width: 0; }

.section-head { display: grid; gap: 14px; max-width: 46ch; }
.section-head .eyebrow { color: var(--gem-amber); }
.section-head h2 { color: var(--ink-strong); }
.section-head p { color: var(--ink-soft); max-width: var(--measure); }

.features {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 18px;
}
.feature {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.feature__icon {
  width: 56px; height: 56px;
  padding: 6px;
  border-radius: 16px;
  background: var(--panel-solid); /* gem socket: solid near-black glass, so it still reads on the dark panels */
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.feature h3 { color: var(--ink-strong); margin-bottom: 6px; }
.feature p { color: var(--ink-soft); max-width: var(--measure); }

/* stagger cards down the shaft like tunnels branching off */
.feature:nth-child(2) { margin-left: clamp(0px, 6vw, 72px); }
.feature:nth-child(3) { margin-left: clamp(0px, 12vw, 144px); }

/* ---- final CTA at bedrock ---- */
.bedrock {
  display: grid;
  gap: 18px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--r-lg);
  /* a lantern pool behind the last CTA */
  background: var(--surface-strong), linear-gradient(180deg, rgba(255, 179, 71, 0.10), rgba(255, 179, 71, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 184, 92, 0.34);
}
.bedrock h2 { color: var(--ink-strong); }
.bedrock p { color: var(--ink-soft); max-width: var(--measure); }

/* ---- footer ---- */
.footer {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
  color: var(--ink-faint);
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }