/* Products: WayMark page, with Moa shown in its own palette inside one wide panel. */
.products-head h1 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; max-width: 14ch; }
.products-head .lede { margin-top: var(--s-6); font-size: 1.3rem; line-height: 1.55; max-width: 44ch; }

.moa-panel {
  --moa-ink: #0f172e; --moa-purple: #6c47c9; --moa-teal: #00b7c6; --moa-green: #6fcf57; --moa-orange: #ff9500; --moa-cloud: #eaecee;
  margin-top: var(--s-12); background: var(--moa-cloud); color: var(--moa-ink);
  border-radius: 24px; padding: var(--s-12);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s-12); align-items: center;
  text-decoration: none;
}
@media (max-width: 900px) { .moa-panel { grid-template-columns: 1fr; padding: var(--s-8) var(--s-6); gap: var(--s-8); } }
.moa-panel img { height: 52px; width: auto; }
.moa-panel h2 { margin-top: var(--s-6); font: 900 var(--step-2)/1.05 'Nunito', system-ui, sans-serif; letter-spacing: -0.02em; max-width: 18ch; }
.moa-panel p { margin-top: var(--s-4); font-size: 1.1rem; max-width: 46ch; }
.moa-facts { list-style: none; padding: 0; margin-top: var(--s-6); display: grid; gap: var(--s-2); }
.moa-facts li { display: flex; gap: var(--s-3); align-items: baseline; font-weight: 600; }
.moa-facts li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; transform: translateY(1px); }
.moa-panel .btn { margin-top: var(--s-8); background: var(--moa-ink); color: #fff; }
.moa-panel .btn:hover { box-shadow: inset 0 0 0 2px var(--moa-orange); }

.cluster { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; justify-self: center; }
.cluster span { position: absolute; border-radius: 50%; border: 4px solid var(--moa-cloud); left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; background: var(--c); }
.cluster .ring { background: var(--moa-cloud); border: 7px solid var(--c); }

.next { max-width: 58ch; }
.next h2 { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em; max-width: 16ch; }
.next p { margin-top: var(--s-4); font-size: 1.15rem; line-height: 1.7; }
.next .actions { margin-top: var(--s-6); }
.sign + .moa-panel { margin-top: 0; }