/* Variant: Metro — the work as a subway map. Light only. */
:root {
  --bg: #fafbff; --surface: #ffffff; --muted: #eff1f8; --ink: #141833; --ink-2: #565b76; --line: #e2e5f0;
  --accent: #6a4fe8; --accent-ink: #ffffff; --accent-soft: #ece7ff; --green-soft: #e3edff; --amber-soft: #fff0d0;
  --night: #141833; --night-2: #222848;
  --l-main: #6a4fe8; --l-web: #2f7bff; --l-crm: #f2545b; --l-doc: #f5a524; --l-coa: #e0479a; --lw: 8px;
  color-scheme: light;
}
.mt-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
@media (min-width: 64em) { .mt-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.mt-title { font-size: clamp(2.75rem, 5.2vw, 5rem); line-height: 0.98; letter-spacing: -0.05em; }
.mt-hero .hero__lead { margin-top: 1.5rem; }
.mt-hero .hero__actions { margin-top: 2rem; }
.mt { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(20, 24, 51, 0.35); font-size: clamp(0.6875rem, 1.1vw, 0.875rem); }
.mt-line { position: absolute; border: 0 solid; border-radius: 0; }
.mt-line--main { left: 6%; right: 6%; top: 32%; height: var(--lw); margin-top: calc(var(--lw) / -2); border-radius: 999px; background: var(--l-main); }
.mt-line--web, .mt-line--crm, .mt-line--doc { top: 32%; border-left-width: var(--lw); border-bottom-width: var(--lw); border-bottom-left-radius: 26px; }
.mt-line--web { left: calc(58% - 12px); width: calc(14% + 12px); height: 22%; border-color: var(--l-web); }
.mt-line--crm { left: 58%; width: 14%; height: 40%; border-color: var(--l-crm); }
.mt-line--doc { left: calc(58% + 12px); width: calc(14% - 12px); height: 58%; border-color: var(--l-doc); }
.mt-line--coa { left: 84%; top: 12%; width: var(--lw); height: 20%; margin-left: calc(var(--lw) / -2); background: var(--l-coa); border-radius: 999px 999px 0 0; }
.mt-st, .mt-end { position: absolute; display: grid; place-items: center; translate: -50% -50%; }
.mt-st::before, .mt-end::before { content: ""; width: 18px; height: 18px; border: 4px solid var(--ink); border-radius: 50%; background: #ffffff; }
.mt-st b, .mt-end b { position: absolute; white-space: nowrap; font-weight: 650; }
.mt-st b { bottom: calc(100% + 6px); }
.mt-st { top: 32%; }
.mt-st--1 { left: 12%; } .mt-st--2 { left: 34%; } .mt-st--3 { left: 58%; } .mt-st--4 { left: 84%; }
.mt-st--3::before { width: 30px; border-radius: 999px; }
.mt-end b { left: calc(100% + 10px); }
.mt-end--web { left: 72%; top: calc(54% - 4px); } .mt-end--crm { left: 72%; top: calc(72% - 4px); } .mt-end--doc { left: 72%; top: calc(90% - 4px); }
.mt-end--coa { left: 84%; top: 12%; }
.mt-st--4 b { bottom: auto; top: calc(100% + 6px); }
.mt-end--web::before { border-color: var(--l-web); } .mt-end--crm::before { border-color: var(--l-crm); } .mt-end--doc::before { border-color: var(--l-doc); } .mt-end--coa::before { border-color: var(--l-coa); }
.steps li:nth-child(1)::before { background: var(--l-main); } .steps li:nth-child(2)::before { background: var(--l-web); }
.steps li:nth-child(3)::before { background: var(--l-crm); } .steps li:nth-child(4)::before { background: var(--l-doc); color: var(--ink); }
.tile--dark .focus strong { color: #b9a9ff; }

@media (max-width: 40em) {
  .mt-end--coa b { left: auto; right: calc(100% + 8px); }
}