/* Myrtle Process Section (mck-process): the line itself is .process in mc.css; this adds column count, line colours
   and the two-track toggle (from site/services/amazon-growth/v1/style.css). */
.mck-process { --display: "Sunset Serial", Georgia, serif; } /* Elementor containers set --display: flex */
@media (min-width: 1081px) {
  .mck-process .process { grid-template-columns: repeat(var(--p-cols, var(--p-n, 5)), minmax(0, 1fr)); }
}
.mck-process .process::after { background: linear-gradient(90deg, var(--pl-a, var(--aqua)), var(--pl-b, var(--teal)) 60%, var(--pl-c, var(--orange))); }
@media (max-width: 1080px) {
  .mck-process .process::after { background: linear-gradient(180deg, var(--pl-a, var(--aqua)), var(--pl-b, var(--teal)) 60%, var(--pl-c, var(--orange))); }
}

/* Two tracks: heading + pill toggle */
.mck-process .proc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.mck-process .toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--white); border: 1px solid var(--hair); }
.mck-process .toggle button { position: relative; z-index: 1; padding: 13px 22px; border: 0; border-radius: 999px; background: none; cursor: pointer; font: 500 14.5px var(--body); color: var(--slate); white-space: nowrap; transition: color .5s var(--ease); }
.mck-process .toggle button[aria-selected="true"] { color: var(--white); }
.mck-process .toggle-ind { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--teal); transform: translateX(calc(var(--idx, 0) * 100%)); transition: transform .7s var(--ease); }
.mck-process .proc-panel[hidden] { display: none; }
@media (max-width: 767px) {
  .mck-process .toggle { grid-template-columns: 1fr; border-radius: 26px; width: 100%; }
  .mck-process .toggle button { white-space: normal; text-align: center; }
  .mck-process .toggle-ind { width: auto; right: 5px; height: calc(50% - 5px); bottom: auto; transform: translateY(calc(var(--idx, 0) * 100%)); border-radius: 22px; }
}
