/* =========================================================
   Marks — the small geometric glyphs on landing-page tiles.
   Built from CSS shapes, no icon font, no SVG dependency.
   Colour comes from currentColor on .mark.
   ========================================================= */

.mark { display: flex; flex-direction: column; align-items: flex-end; color: var(--accent); }
.page-tile--ibm .mark { color: var(--accent-2); }

/* magnifier — product discovery / search */
.mark--search::before { content: ""; display: block; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; }
.mark--search::after  { content: ""; display: block; width: 9px; height: 2px; background: currentColor; transform: rotate(45deg); margin: -1px 0 0 11px; }

/* four squares — multi-location operations */
.mark--grid { display: grid; grid-template-columns: 7px 7px; grid-template-rows: 7px 7px; gap: 3px; }
.mark--grid i { background: currentColor; }
.mark--grid i:nth-child(2), .mark--grid i:nth-child(3) { opacity: 0.45; }

/* basket — digital commerce */
.mark--cart::before { content: ""; display: block; width: 18px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; }
.mark--cart i { display: flex; gap: 8px; margin-top: 3px; }
.mark--cart i::before, .mark--cart i::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

/* rising bars — auction / bidding */
.mark--bars { flex-direction: row; align-items: flex-end; gap: 3px; height: 18px; }
.mark--bars i { width: 4px; background: currentColor; }
.mark--bars i:nth-child(1) { height: 8px;  opacity: 0.45; }
.mark--bars i:nth-child(2) { height: 14px; opacity: 0.7; }
.mark--bars i:nth-child(3) { height: 18px; }

/* signal spike — product campaign */
.mark--pulse { flex-direction: row; align-items: center; }
.mark--pulse i { background: currentColor; }
.mark--pulse i:nth-child(1) { width: 6px; height: 2px; opacity: 0.45; }
.mark--pulse i:nth-child(2) { width: 2px; height: 16px; }
.mark--pulse i:nth-child(3) { width: 2px; height: 8px; opacity: 0.7; }
.mark--pulse i:nth-child(4) { width: 8px; height: 2px; opacity: 0.45; }

/* stacked layers — solution campaign / report */
.mark--layers { gap: 3px; }
.mark--layers i { width: 18px; height: 3px; background: currentColor; }
.mark--layers i:nth-child(2) { opacity: 0.6; }
.mark--layers i:nth-child(3) { opacity: 0.3; }

/* form sheet — gated whitepaper */
.mark--form { width: 15px; height: 19px; border: 2px solid currentColor; justify-content: center; gap: 3px; padding: 0 3px; align-items: stretch; }
.mark--form i { height: 2px; background: currentColor; opacity: 0.6; }
.mark--form i:nth-child(2) { width: 70%; }