.primary-tool {
  border-color: #cfc8ff;
  background: linear-gradient(145deg, #fff 0%, #f5f2ff 100%);
  box-shadow: 0 10px 30px rgba(101, 82, 232, .14);
}
.popular {
  position: absolute;
  right: 14px;
  top: 13px;
  color: #fff;
  background: var(--primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 8px;
  border-radius: 10px;
}
.tool-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 26px 0;
}
.tool-guide-grid a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  transition: .2s;
}
.tool-guide-grid a:hover { border-color: #cbc5f7; transform: translateY(-2px); }
.tool-guide-grid strong { color: var(--primary-dark); }
.tool-guide-grid span { color: var(--muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 700px) { .tool-guide-grid { grid-template-columns: 1fr; } }

/* Colour-coded tool icons: each tool gets its own visual cue. */
.tool .icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  font-size: 0;
  line-height: 1;
}
.tool .icon::before { font-size: 31px; }
.tool[data-tool="background"] .icon { background: #eeeaff; }
.tool[data-tool="background"] .icon::before { content: "✂"; color: #6552e8; }
.tool[data-tool="compress"] .icon { background: #e6f8f0; }
.tool[data-tool="compress"] .icon::before { content: "⇣"; color: #109b65; font-size: 42px; }
.tool[data-tool="resize"] .icon { background: #e7f2ff; }
.tool[data-tool="resize"] .icon::before { content: "↔"; color: #2373df; font-size: 38px; }
.tool[data-tool="crop"] .icon { background: #fff1e5; }
.tool[data-tool="crop"] .icon::before { content: "⌗"; color: #e36a12; font-size: 41px; }
.tool[data-tool="convert"] .icon { background: #ffe9ec; }
.tool[data-tool="convert"] .icon::before { content: "JPG"; color: #dd3b54; font-size: 17px; font-weight: 900; }
.tool[data-tool="png"] .icon { background: #e7f9fb; }
.tool[data-tool="png"] .icon::before { content: "PNG"; color: #118e9d; font-size: 17px; font-weight: 900; }
.tool[data-tool="editor"] .icon { background: #fff4d8; }
.tool[data-tool="editor"] .icon::before { content: "✎"; color: #bd8200; font-size: 38px; }
.tool[data-tool="upscale"] .icon { background: #eaf1ff; }
.tool[data-tool="upscale"] .icon::before { content: "2×"; color: #4c61d9; font-size: 28px; font-weight: 900; }
.tool[data-tool="watermark"] .icon { background: #f7eafd; }
.tool[data-tool="watermark"] .icon::before { content: "©"; color: #a646c3; font-size: 36px; font-weight: 900; }
.tool[data-tool="meme"] .icon { background: #fff0f5; }
.tool[data-tool="meme"] .icon::before { content: "☺"; color: #e05289; font-size: 37px; }
.tool[data-tool="rotate"] .icon { background: #e7f8f8; }
.tool[data-tool="rotate"] .icon::before { content: "↻"; color: #137f88; font-size: 40px; }
.tool[data-tool="blur"] .icon { background: #eef0f5; }
.tool[data-tool="blur"] .icon::before { content: "◉"; color: #596579; font-size: 35px; }

@media (max-width: 700px) { .tool .icon { width: 55px; height: 55px; border-radius: 15px; } .tool .icon::before { font-size: 27px; } }