/* ==========================================================================
   design-canvas.css - page-specific styles for pages/design-canvas.html
   Figma frame "Design Canvas & AI" 448:3405 (1920 x 10612).
   ========================================================================== */

/* The hero shot sits below the buttons on this page rather than beside the
   copy, and is wider than the home hero's glass frame. */
.hero--violet .hero__media {
  margin-top: var(--sp-11);
  max-width: 1198px;
  background-color: transparent;
  padding: 0;
}

.hero--violet .hero__media img {
  border-radius: var(--r-md);
  box-shadow: var(--sh-drop);
}

/* Dotted grid in the hero's top-right corner. */
.canvas-hero__dots {
  position: absolute;
  top: 118px;
  right: 74px;
  width: 144px;
  height: 144px;
  background-image: radial-gradient(var(--c-white-a71) 2px, transparent 2px);
  background-size: 18px 18px;
  opacity: 0.8;
}

.sketch__lede {
  font-family: var(--ff-ui);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-ui);
  color: var(--c-ink-strong);
  text-align: center;
  max-width: 940px;
  margin-inline: auto;
}

@media (max-width: 768px) {
  .canvas-hero__dots { display: none; }

  .hero--violet .hero__media { margin-top: var(--sp-9); }
}