/* ============================================================================
   SmartComply page artwork
   ---------------------------------------------------------------------------
   Glyph tiles and the park line art. All on the site's own tokens, so the page
   stays on SmartRoots' brand blue rather than the mockup's palette.
   ========================================================================= */

.cg { display: block; flex: none; }

.cg-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-md);
  background: var(--blue-50);
  color: var(--blue-600);
}

/* --- Pilot figure --------------------------------------------------------------
   Brand blue for the sheet that carries the figure, the site's pale blues for
   the ones fanned behind it, and the signal yellow for the spark. Nothing here
   takes the mockup's palette.                                                  */

.pfan { display: block; width: 100%; height: auto; }
.pfan__sheet { fill: var(--blue-100); }
.pfan__rule { stroke: var(--blue-200); }
.pfan__doc { fill: var(--white); stroke: var(--blue-500); }
.pfan__fold { stroke: var(--blue-500); }
.pfan__spark { stroke: var(--yellow-400); }

/* --- Park line art ------------------------------------------------------------ */

.cpark {
  position: absolute;
  bottom: 0;
  z-index: 0;
  width: clamp(8rem, 12vw, 12rem);
  max-width: none;
  height: auto;
  color: var(--blue-300);
  opacity: .7;
  pointer-events: none;
}
.cpark--left { left: 0; }
.cpark--right { right: 0; }

/* Below the two-column breakpoints the panels are too narrow to give the park
   room without it colliding with the copy. */
@media (max-width: 899px) {
  .cpark { display: none; }
}