/* DS v2 motif: Blueprint / Time-grid background and panels.
   Keep subtle. Use only via classes. */

.ds-main {
  position: relative;
}

/* Apply blueprint vibe globally on external pages (marketing/_layout). */
body.public-theme-wow .ds-main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.10;
  background-image:
    linear-gradient(to right, rgba(37, 99, 235, 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.22) 1px, transparent 1px);
  background-size: var(--ds-grid-size, 28px) var(--ds-grid-size, 28px);
  mask-image: radial-gradient(900px 320px at 20% 4%, #000 32%, transparent 74%);
}

body.public-theme-wow .ds-main > .ds-container {
  position: relative;
  z-index: 1;
}

.ds-blueprint {
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--ds-border);
  background: rgba(255, 255, 255, 0.88);
  overflow: hidden;
}

.ds-blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--ds-grid-opacity, 0.12);
  background-image:
    linear-gradient(to right, rgba(37, 99, 235, 0.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37, 99, 235, 0.28) 1px, transparent 1px);
  background-size: var(--ds-grid-size, 28px) var(--ds-grid-size, 28px);
  mask-image: radial-gradient(800px 260px at 20% 10%, #000 40%, transparent 70%);
}

.ds-blueprint__inner {
  position: relative;
  padding: 14px;
}

.ds-ruler {
  height: 3px;
  width: 54px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2));
  opacity: 0.85;
}