/* ============================================
   Decorative dot-grid layer
   A tiled grid of small dots used as a static,
   non-interactive background texture at section
   edges (see elevenlabs.io-style edge treatment).
   Pure CSS radial-gradient tiling — no images,
   no canvas, scales losslessly at any breakpoint.
   ============================================ */
.dot-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  background-repeat: repeat;
}

/* Fade the grid so it reads as an edge accent rather than a solid mat */
.dot-grid--fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 100%);
}
.dot-grid--fade-bottom {
  -webkit-mask-image: linear-gradient(to top, transparent, #000 35%, #000 100%);
          mask-image: linear-gradient(to top, transparent, #000 35%, #000 100%);
}
.dot-grid--fade-out {
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 40%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 40%, transparent 85%);
}

.dot-grid--light {
  background-image: radial-gradient(circle, var(--dot-color-light) var(--dot-size), transparent var(--dot-size));
}

/* Any section that hosts a .dot-grid layer needs relative positioning
   and its content raised above the dot layer. */
.dot-grid-host { position: relative; isolation: isolate; }
.dot-grid-host > *:not(.dot-grid) { position: relative; z-index: 1; }

/* ============================================
   Dot-masked display text (footer wordmark)
   Same dot pattern, clipped to glyph shapes via
   background-clip so the letters are *made of* dots.
   ============================================ */
.dot-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  color: transparent;
  background-image: radial-gradient(circle, var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
}

.container {
  position: relative;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.rail-dots-top { border-top: 1px solid var(--border); }
.rail-dots-bottom { border-bottom: 1px solid var(--border); }
.rail-dots-both { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }