.lattice-band {
  position: relative;
  min-height: 470px;
  margin: 18px calc(-1 * clamp(16px, 3vw, 36px)) 0;
  overflow: hidden;
  isolation: isolate;
  color: #effcff;
  background: #061014;
  border-top: 1px solid #2a4a50;
  border-bottom: 1px solid #2a4a50;
}

.lattice-band::before,
.lattice-band::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.lattice-band::before {
  inset: 16px;
  border: 1px solid rgba(153, 224, 228, 0.16);
  clip-path: polygon(0 0, 92px 0, 92px 1px, 1px 1px, 1px 72px, 0 72px, 0 0, 100% 0, 100% 72px, calc(100% - 1px) 72px, calc(100% - 1px) 1px, calc(100% - 92px) 1px, calc(100% - 92px) 0, 100% 0, 100% 100%, calc(100% - 92px) 100%, calc(100% - 92px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 72px), 100% calc(100% - 72px), 100% 100%, 0 100%, 0 calc(100% - 72px), 1px calc(100% - 72px), 1px calc(100% - 1px), 92px calc(100% - 1px), 92px 100%, 0 100%);
}

.lattice-band::after {
  top: 0;
  bottom: 0;
  left: clamp(16px, 3vw, 36px);
  width: 1px;
  background: rgba(73, 217, 232, 0.2);
}

#evidenceLattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.lattice-copy {
  position: relative;
  z-index: 2;
  width: min(390px, calc(100% - 32px));
  padding: 42px clamp(24px, 4vw, 54px);
  pointer-events: none;
}

.lattice-kicker {
  margin: 0 0 7px;
  color: #7ee9ef;
  font: 700 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.lattice-copy h2 {
  margin: 0 0 9px;
  color: #ffffff;
  font-size: 28px;
}

.lattice-copy p:last-child {
  margin: 0;
  color: #b8cdd3;
  font-size: 13px;
  line-height: 1.55;
}

.lattice-axis {
  position: absolute;
  z-index: 2;
  left: clamp(24px, 4vw, 54px);
  bottom: 42px;
  display: grid;
  grid-template-columns: auto minmax(12px, 48px) auto minmax(12px, 48px) auto minmax(12px, 48px) auto;
  align-items: center;
  width: min(480px, calc(100% - 48px));
  color: #8ca9ae;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
  pointer-events: none;
}

.lattice-axis i {
  height: 1px;
  margin: 0 8px;
  background: #315159;
}

.lattice-scale {
  position: absolute;
  z-index: 2;
  top: 42px;
  right: clamp(24px, 4vw, 54px);
  display: grid;
  grid-template-columns: auto 24px auto 24px auto;
  align-items: center;
  color: #769298;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
  pointer-events: none;
}

.lattice-scale i {
  height: 1px;
  margin: 0 6px;
  background: #315159;
}

.lattice-boundary {
  position: absolute;
  z-index: 2;
  right: clamp(16px, 3vw, 36px);
  bottom: 28px;
  width: min(420px, calc(100% - 32px));
  margin: 0;
  padding-left: 12px;
  color: #b9cdd0;
  border-left: 2px solid #f3b84b;
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
  pointer-events: none;
}

button.guided {
  color: #07353b;
  border-color: #4acbd3;
  background: #a8edf0;
}

button.guided:hover:not(:disabled) {
  color: #041f23;
  border-color: #2db2bc;
  background: #c7f6f8;
}

@media (max-width: 700px) {
  .lattice-band { min-height: 520px; }
  .lattice-copy { width: 100%; padding: 34px 24px; }
  .lattice-axis { left: 24px; bottom: 80px; }
  .lattice-scale { top: auto; right: 24px; bottom: 106px; }
  .lattice-boundary {
    right: 24px;
    bottom: 22px;
    text-align: left;
  }
}

@media (max-width: 420px) {
  .lattice-band { min-height: 540px; }
  .lattice-copy h2 { font-size: 24px; }
  .lattice-axis {
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    width: calc(100% - 48px);
  }
  .lattice-axis i { margin: 0 5px; }
  .lattice-boundary { width: calc(100% - 48px); }
}

@media (prefers-reduced-motion: reduce) {
  #evidenceLattice { transform: none !important; }
}