/* "Look closer" section: the WebGL lens reveals the connected system underneath. */
.lens-sec {
  position: relative;
  display: grid;
  align-content: center;
  min-height: min(88vh, 860px);
  overflow: hidden;
  isolation: isolate;
  border-block: 1px solid var(--line);
}
/* Wide screens: fixed bands above the eyebrow and below the button hold the maze's top and bottom rows
   (js/lens/lens-layers.js TOP_Y / BOTTOM_Y), so they keep their room on short laptop screens too. */
@media (min-width: 701px) {
  .lens-sec { padding-block: 190px 165px; }
}
.lens-sec__canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: -1; touch-action: pan-y; }
.lens-sec__copy { display: grid; gap: 22px; width: 100%; pointer-events: none; }
.lens-sec__copy a, .lens-sec__copy button { pointer-events: auto; }
.lens-sec h2 { font-size: var(--step-4); line-height: 0.98; letter-spacing: -0.05em; max-width: 12ch; }
.grad {
  background: linear-gradient(100deg, var(--teal) 10%, var(--teal-2) 55%, var(--iris) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lens-sec__hint {
  position: absolute; right: var(--gutter); bottom: 28px; margin: 0;
  color: var(--ink-2); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
}
@media (max-width: 700px) {
  .lens-sec { min-height: 0; padding-bottom: 320px; }
  .lens-sec__hint { left: var(--gutter); right: auto; }
}