/* The components page's own layout. */

.kit h2 { font-size: var(--display-2); letter-spacing: -0.02em; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.kit-hero { position: relative; isolation: isolate; overflow: hidden; }
.kit-wash {
  position: absolute;
  inset: -40% -20% 0;
  z-index: -1;
  background-image: var(--dither-checker-25);
  background-size: calc(var(--dither-cell) * 3) calc(var(--dither-cell) * 3);
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(60% 60% at 30% 20%, #000, transparent 100%);
  mask-image: radial-gradient(60% 60% at 30% 20%, #000, transparent 100%);
  will-change: transform;
}
.kit-hero h1 { font-size: var(--display-1); letter-spacing: -0.03em; }
.kit-hero .st-lead { margin-top: var(--space-20); }
.kit-buttons { margin-top: clamp(2rem, 4vw, 3rem); }

.kit-rule {
  max-width: 62ch;
  padding: var(--space-24);
  --fill: var(--surface);
  color: var(--text-dim);
  line-height: var(--leading-relaxed);
}
.kit-rule b { color: var(--text); }
.kit-grid { display: grid; gap: var(--space-28); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); }
.kit-box { padding: var(--space-24); min-height: 140px; display: flex; align-items: flex-end; }
.kit-box p { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); line-height: var(--leading-relaxed); }
.kit-controls { margin-top: clamp(2rem, 4vw, 3rem); gap: var(--space-16); }
.kit-note { color: var(--text-dim); max-width: 60ch; }

.kit-cards { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.kit-target { margin: 200px 0 0 auto; padding: var(--space-24); width: min(100%, 420px); }
.kit-target p { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-dim); }

.kit-dither-row { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3vw, 3rem); align-items: flex-start; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.kit-plate { width: clamp(180px, 22vw, 280px); border: 2px solid var(--border-2); }
.kit-swatches { display: flex; gap: var(--space-16); flex-wrap: wrap; }
.kit-swatch {
  width: 130px;
  height: 130px;
  border: 1px solid var(--border-2);
  display: flex;
  align-items: flex-end;
  padding: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--text);
}
.kit-band { margin-top: clamp(2.5rem, 5vw, 4rem); }
.kit-effects { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kit-signup { max-width: 46rem; }

@media (max-width: 899px) {
  .kit-target { margin-top: 120px; }
  .kit-buttons { flex-direction: column; align-items: stretch; }
  .kit-buttons .st-btn { width: 100%; }
}