/* NIN Group · hand-built product art (Tier A/B): no screenshots, no app icons.
 * .art-knot = company tile · .art-jar = JarSave · .art-chat = Vaumu. All colours from tokens. */
.art { position: absolute; inset: 0; container-type: size; overflow: hidden; }
.art__chip {
  position: absolute; display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xs); box-shadow: var(--shadow-whisper);
}
.art__chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.art__chip--accent { background: var(--color-accent); color: var(--color-on-ink); }
.art__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); }

/* Company knot: ecru Simpul on ink, cropped by the tile edge */
.art-knot { background: var(--color-ink); }
.art-knot .simpul { position: absolute; width: 78cqh; height: 78cqh; right: -12cqh; bottom: -14cqh; --knot: var(--color-paper); --gap: var(--color-ink); }
.art-knot .art__chip:nth-of-type(1) { top: 9cqh; left: 5cqw; }
.art-knot .art__chip:nth-of-type(2) { top: 26cqh; left: 13cqw; }
.art-knot .art__chip:nth-of-type(3) { bottom: 8cqh; left: 5cqw; background: var(--color-ink-2); color: var(--color-on-ink-muted); box-shadow: 0 0 0 var(--rule-hair) var(--color-ink-rule); }

/* JarSave: a jar filling with coins toward a dashed goal line */
.art-jar { background: var(--color-accent-soft); }
.art-jar svg { position: absolute; height: 64cqh; width: auto; left: 50%; bottom: 18cqh; translate: -50% 0; }
.art-jar .j-lid { fill: var(--color-ink); }
.art-jar .j-body { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 4; }
.art-jar .j-shine { fill: none; stroke: var(--color-paper-2); stroke-width: 6; stroke-linecap: round; }
.art-jar .j-goal { stroke: var(--color-accent); stroke-width: 2.5; stroke-dasharray: 6 6; }
.art-jar .c1 { fill: var(--color-accent); stroke: var(--color-ink); stroke-width: 2.5; }
.art-jar .c2 { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 2.5; }
.art-jar .c3 { fill: var(--color-ink); }
.art-jar .art__chip:nth-of-type(1) { top: 8cqh; right: 6cqw; }
.art-jar .art__chip:nth-of-type(2) { top: 40cqh; left: 6cqw; }
.art-jar .art__chip:nth-of-type(3) { bottom: 5cqh; left: 50%; translate: -50% 0; }

/* Vaumu: one chat, three looks, fanned like a deck */
.art-chat { background: var(--color-ink); }
.art-chat .layer {
  position: absolute; width: min(62cqw, 15rem); padding: var(--space-md); border-radius: var(--radius-md);
  display: grid; gap: var(--space-xs); font-size: var(--text-xs); line-height: 1.3;
}
.art-chat .layer > small { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-2xs); }
.art-chat .bub { max-width: 80%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
.art-chat .bub--out { justify-self: end; }
.art-chat .l1 { left: 8cqw; top: 10cqh; background: var(--color-ink-3); color: var(--color-on-ink-muted); rotate: -4deg; }
.art-chat .l1 .bub { background: var(--color-ink-2); color: var(--color-on-ink); }
.art-chat .l1 .bub--out { background: var(--color-paper-2); color: var(--color-ink); }
.art-chat .l2 { left: 22cqw; top: 24cqh; background: var(--color-paper-2); color: var(--color-muted); rotate: 2deg; }
.art-chat .l2 .bub { background: var(--color-paper); color: var(--color-ink); box-shadow: 0 0 0 var(--rule-hair) var(--color-rule); }
.art-chat .l2 .bub--out { background: var(--color-accent); color: var(--color-on-ink); box-shadow: none; }
.art-chat .l3 { left: 36cqw; top: 40cqh; background: var(--color-paper); color: var(--color-muted); rotate: 7deg; box-shadow: var(--shadow-whisper); }
.art-chat .l3 .bub { background: var(--color-paper-2); color: var(--color-ink); }
.art-chat .l3 .bub--out { background: var(--color-ink); color: var(--color-on-ink); }

/* Small tiles: keep one chip and the front layer only */
@container (max-height: 17rem) {
  .art-jar .art__chip:nth-of-type(n + 2), .art-knot .art__chip:nth-of-type(2) { display: none; }
  .art-chat .l1, .art-chat .l2 { display: none; }
  .art-chat .l3 { left: 50%; top: 50%; translate: -50% -50%; rotate: 0deg; width: min(80cqw, 13rem); }
}
@container (max-width: 22rem) {
  .art-jar .art__chip:nth-of-type(n + 2) { display: none; }
}
@container (max-width: 15rem) {
  .art-jar .art__chip, .art-knot .art__chip:nth-of-type(n + 2) { display: none; }
  .art-chat .l1, .art-chat .l2 { display: none; }
  .art-chat .l3 { left: 50%; top: 50%; translate: -50% -50%; rotate: 0deg; width: 86cqw; }
}

/* Company-fact tiles in the hero: one big numeral each, no product art */
.art-zero { background: var(--color-ink); color: var(--color-on-ink); display: grid; align-content: space-between; padding: var(--space-lg); }
.art-zero b { font: 700 58cqh / 0.8 var(--font-body); letter-spacing: -0.06em; }
.art-zero span { font-size: var(--text-sm); color: var(--color-on-ink-muted); }
.art-year { background: var(--color-accent-soft); color: var(--color-ink); display: grid; align-content: space-between; padding: var(--space-lg); }
.art-year b { font: 600 34cqh / 0.9 var(--font-display); font-variation-settings: "opsz" 18; letter-spacing: -0.02em; color: var(--color-accent); }
.art-year span { font-size: var(--text-sm); color: var(--color-muted); }