/* platform.css — Technology/Platform page tweaks */
.platform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.platform-block { padding: 30px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.18s ease; }
.platform-block:hover { background: var(--paper-alt); }
.platform-block h2 { font-size: 1.4rem; font-stretch: 104%; margin-bottom: 8px; }
.platform-block p { font-size: 0.96rem; color: var(--muted); margin: 0; }
@media (max-width: 700px) { .platform-grid { grid-template-columns: 1fr; } }

/* ===== Example tracking view ===== */
.track-demo { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: 0 18px 44px rgba(11,30,51,0.14); }
.track-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; font-weight: 500; }
.demo-badge { background: var(--amber); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 0.78rem; font-weight: 700; }
.track-steps { list-style: none; margin: 0; padding: 0; }
.track-steps li { position: relative; display: flex; gap: 14px; padding-bottom: 24px; }
.track-steps li:last-child { padding-bottom: 0; }
.track-steps li::before { content: ""; position: absolute; left: 8px; top: 22px; bottom: 2px; width: 2px; background: var(--line); transition: background 0.4s; }
.track-steps li:last-child::before { display: none; }
.track-steps .dot {
  position: relative; z-index: 1; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--line);
  transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.track-steps strong { display: block; font-size: 0.98rem; }
.track-steps .sub { color: var(--muted); font-size: 0.88rem; }
.track-steps li:not(.is-done):not(.is-active) strong { color: #5F6F86; }
.track-steps li.is-done .dot { background: var(--ink); border-color: var(--ink); }
.track-steps li.is-done::before { background: var(--amber); }
.track-steps li.is-active .dot { background: var(--amber); border-color: var(--amber); animation: dotPulse 1.6s ease-out infinite; }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(240,169,58,0.55); } 100% { box-shadow: 0 0 0 12px rgba(240,169,58,0); } }
.demo-caption { font-size: 0.84rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .track-steps .dot { animation: none !important; } }